Styling Smaller Images for Mobile

Styling Smaller Images for Mobile

image alignment on mobile devicesI recently sorted out an issue that I’ve noticed before, but ignored, even though it bothered me just a bit. And it could be that it bothered me and doesn’t bother anyone else. Have you ever noticed that if you’re looking at a website on your phone, goofy things happen with smaller images that are set to be aligned to the right or the left?

I took a screen shot from the Signal Pres website I just did–two, actually. Click on the image on the right if you want to see the larger version. On the left you see the default layout that happens without any additional attention to what happens with images. Depending on the length of the words in your headlines (or your text if it’s an image in an article or post), you end up with a huge swath of blank space and awkward typography ensues.

It’s not an issue if all of your images are over 320 pixels wide, but if you use thumbnails for anything, or the WordPress default medium image size of 300 pixels wide, you will see this happen.

It’s quite easy to fix, and here is how I did it. Look in your style.css for your smallest mobile query section. For me, it’s a max-width: 767px block. Then, just add this inside of that section:

@media only screen and (max-width: 767px) {
.featuredpost .alignleft, /* featured post widget */
.featuredpost .alignright,
img.alignright, /* standard image in content */
img.alignleft,
.wp-caption.alignleft, /* if you ever use smaller images with captions */
.wp-caption.alignright {
display: block;
margin: 0 auto 24px;
float: none;
}
}
view raw style.css hosted with ❤ by GitHub

Once you have this in your stylesheet, when you see your site on a phone or other small device, the small images will essentially drop their alignment and adopt the alignment of a centered image. No more awkward text wrapping!

Do something awesome. Tell a friend:

subscribe by email

If you're an email kind of person, that's totally cool. Go ahead and sign up here to get the latest blog entries in your inbox! No worries, I never share your address.
  • This field is for validation purposes and should be left unchanged.

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Bars Code Check chevron-down chevron-left chevron-right chevron-up Envelope Laptop Search Times Facebook GitHub Google Plus Instagram LinkedIn Pinterest Twitter WordPress Logo Wordpress Simple