Left- and right-aligned images look beautiful on desktop browsers, but sometimes with responsive WordPress themes you end up with something like this:
Yuck.
Because of the skinny portrait-style image, the text is wrapping improperly on mobile, and it looks like a mess.
Very frustrating, but with a couple of lines of CSS, we can clear this right up.
The approach I’ve found most effective is to automatically center your left- and right-aligned images on smaller screens.
To do this, open up the stylesheet for your child theme, or the Custom CSS section of the theme Customizer, and drop in the following code:
@media only screen and (max-width: 600px) {
figure.alignleft, img.alignleft, figure.alignright, img.alignright {
float:none;
display:block;
margin-left:auto;
margin-right:auto;
}
}The logic here is simple: on screens with a width less than 600 pixels, images aligned to the right or left (via WordPress’s default style classes) will be centered via float:none, margin-left:auto, and margin-right:auto. (Feel free to modify the max width to suit your needs.)
The result? The image in the example above now appears centered on smartphones, but still perfectly right-aligned on larger screens:
Much better!
I hope this helps! If you have any questions, please feel free to leave them in the comments below.
Holy cow… thank you. I can’t believe how well this worked and how simple it was to implement. A virtual high-five! 🖐
No problem Chris, glad to hear it helped you out! 🖐
Thanks for the snippet. This should really be the default behavior.
I agree! Some themes handle it better than others.
This did exactly what I needed, thanks so much
No problem!