Remember Clippy?

That annoying little paper clip did everything it could to teach us + we picked up some bad habits along the way.

If you used WordPress before Gutenberg came around in 2018, you probably learned to place images the old way. In what looked like a Word document, you’d add the image + click left or right align to get your text to wrap around the image. It looked great on a big screen.

Clippy, may he rest in peace, is about as old as that trick. And it’s time to place images in a way that works well on desktop, but also on mobile devices.

Because on smaller screens, wrapped text gets really weird. It starts to squish into a tiny little ribbon of a handful of letters per line next to the shrinking image. Good luck reading that copy that you spent hours poring over.

It doesn’t have to be this way. The fix is Columns.

In Gutenberg, or any block editor, add a Columns block where you want text to appear alongside an image. Drop your image into one column + your text into the other. It’s that easy. No alignment gymnastics or hoping that the line breaks look nice at 500px wide.

The reason this works so much better than the old method is because columns are responsive by design. Unless you specify, side-by-side columns will stack on smaller screens. Your text appears in an easy-to-read block + the image appears above or below, depending on which column it’s in. Clean, readable, no effort required.

Want a pro tip? Don’t left or right align your image on desktop. Instead, let it fill the column + use center align. When your columns stack, if your image isn’t full-width, it will be awkwardly sitting to the left or the right side of the screen. This is especially true on smaller tablet screens or those really, really big phones. By centering the image from the start, it will appear in the middle of the screen when the columns stack + it looks intentional.

A few places you might use this trick:

• Blog posts where an image is paired with a story
• Service pages with a photo of you + text about your work
• About pages with a headshot + bio

All of those used to be text-wrap situations. All of them would benefit from using columns now.

I know, I know. Learning a new way to do something is annoying at best. Especially when the old way technically “works.” But technically works on desktop + actually reads well on phone are two very different statements. Guess what, most of your site visitors are holding a phone.

When you go through old posts to update them (SEO refresh, seasonal update, blog audit, whatever), this is a great tiny swap to make while you’re in there. Delete the image that has text wrapped around it, drop in a Columns block, place the image on one side + the text on the other, center the image in its column. Then move on with your day.

Tiny change. Way better mobile experience.

Plus, your desktop readers won’t consciously notice what changed, which is exactly what you want.

- Alison