Center-Align Images on Mobile Only

If we have a site link, we can help with CSS issues, generally.

Without, it’s like asking a mechanic how much time it will take to fix the noise in a car.

See, we need to see the cause.

Please provide a link to the site for help with CSS issues.

There are multiple approaches. Overriding existing CSS rules from a theme or plugin might make this more difficult. That said, here’s a very simple example.

Example HTML:

<div class="img-container">
    <img src="https://placekitten.com/g/200/300" alt="">    
</div>

Example CSS:

@media screen and (max-width: 768px) {
  .img-container {
    text-align: center;
  }
}

Note the media query which is checks how wide the screen is and only allows that CSS rule to work up to a maximum width of 768 pixels.

https://jsbin.com/suducorabe/edit?html,css,output
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Hi.

@PioneerWebDesign The site is https://www.skilledflyer.com

@mizner I tried the example CSS but it didn’t change anything. Any tips?

Thank you both for your time.

• This reply was modified 8 years, 2 months ago by incomescout.

Since you are using CloudFlare, make sure to clear the cache after site edits.

If it’s still not working, you might also try something like this:

Example HTML:

<div class="img-container">
    <img src="https://placekitten.com/g/200/300" alt="">    
</div>

Example CSS:

@media screen and (max-width: 768px) {
  .img-container {
    display: flex;
    justify-content: center;
  }
}

This is done using what is commonly referred to as “flexbox” which often works, but the Internet Explorer support for it is kinda spotty.

Lastly, as @swansonphotos mentioned make sure you clear your cache after edits. Or temporarily disable the cache.