Support » Fixing WordPress » Center-Align Images on Mobile Only

  • I have a WordPress site in which many of my images are aligned to the right or left. However, it doesn’t look good on mobile.

    Is there any custom CSS that I could use to center-align images on mobile devices only?

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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/

    Thread Starter incomescout

    (@incomescout)

    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 4 years, 5 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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Center-Align Images on Mobile Only’ is closed to new replies.