How To Fix WordPress Image Alignment & Text Wrap Problems On Mobile

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!

This Blog, Circa Summer 2007

I built the first version of this website in 2007, more than ten years ago as of this writing. I’ve lost nearly everything from that era, but tonight I recovered and uploaded one of the earliest versions of my personal homepage.

Check the screenshot below, or click here to see a live version in your browser.

(The image in the sidebar is Shadow.)

Making Website Intros Great Again

Long-time web users will likely remember the Flash website intro craze of the early 2000s. That era came to an end for a variety of reasons, including security risks, browser compatibility, and the sheer impracticality of a long intro sequence in a world of growing impatience. These days I would never advise the use of Flash in any capacity—much less as the backbone of a website.

However, I actually went with a similar concept in my design choice for the Merrill X website. The intro/teaser is built on HTML5 rather than Flash, but it’s certainly reminiscent of that old technology.

I mainly just wanted to get something up and running quickly, and for the few people who visit the site directly, I think it provides a solid rundown of what we do and how to get in touch.