I 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:
[gist id=”6425548″]
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!
Leave a Reply