How to Align Images with Text Wrapping in WordPress (Without Breaking Your Layout)

f you’ve ever struggled to align an image with text wrapping in WordPress and make it look exactly right on both desktop and mobile, you’re not alone. One of the most common frustrations when working with images in the WordPress block editor (Gutenberg) is getting your image to sit neatly beside a paragraph of text without overlapping, breaking the layout, or acting unpredictably on the front end.

In this tutorial, I’ll show you exactly how to float an image right with text wrap in WordPress, with a custom CSS solution that works perfectly — even when the built-in editor doesn’t.

The Problem: WordPress Image Block Not Wrapping Text

When you use the built-in align-right option in the WordPress block editor, it often looks great in the editor preview — but on the actual site, the layout can fall apart. The image may float incorrectly, fail to wrap text, or stack awkwardly on smaller screens.

In many cases, users report that the WordPress image block is not wrapping text at all. This is usually due to missing CSS support in the theme or conflicting margin/padding styles.

Float left/right will wrap text, of course, but this technique pushes the image half outside the containing element so that it protrudes into the white space to the right of the column.

The Fix: Custom CSS to Align Image with Text Wrapping in WordPress

To shift an image to the right in the WordPress block editor and make sure text wraps around it properly, I use a custom CSS class and apply it to your image block.

Here’s a clean, responsive CSS snippet you can add via Appearance → Customize → Additional CSS:

/* SHIFT IMAGES */
@media screen and (min-width: 700px) {
	.shiftRight {
		float: right;
		max-width: 50% !important;
		padding-right: 100px;
		margin-left: 20px !important;
		clear: none !important;
		margin: 7px 0px 20px 40px !important;
	}
}

Apply the shiftRight class to your image block (you can do this in the “Advanced” settings panel of the block editor), and you’ll have smooth, clean text wrapping around the image — just the way it should be.

Note 1: This has been tested inside the standard Twenty Twenty WordPress theme. Your milage may vary but at least this will point you in the right direction.

Note 2: I’ve set this up to only work on screens 700 px and wider. Otherwise, on small screens, the effect makes images far too small. With this code, the image will remain unaffected on phones and will appear its normal width.

Here’s what it should look with the text wrapping in WordPress on larger screens…

Pro Tip: How to Wrap Text Around Image in Gutenberg Editor

If you’re working specifically in the Gutenberg editor, the UI makes it easy to align images left or right, but the styles often rely on theme support. Using custom CSS like the example above ensures that you’re not at the mercy of your theme’s styling choices.

Whether you’re trying to shift an image to the right in WordPress block editor for design purposes or just want consistent formatting across devices, a little CSS goes a long way.

This method also gives you more control than Gutenberg’s default alignment tools. It’s the most reliable way to wrap text around image in Gutenberg editor without unexpected breaks in layout.

Final Thoughts on Text Wrapping in WordPress

When you’re building a polished blog layout, visuals matter. Knowing how to float an image right with text wrap in WordPress can make your content more readable and engaging — especially when your theme doesn’t play nice with default block settings.

The block editor can be frustrating. This effect may not be visible on your back end. Apply the code to your theme customizer, test it out on the front end, and let me know how it goes.

If you have an edge-case where it doesn’t work, I’d love to know.

Have you run into this issue with your own site? Drop a comment and share your workaround! Or feel free to copy and paste this CSS snippet — it just might save you hours of frustration.

View my projects.