How to fix the Maximum Width of Left & Right Aligned Images in WordPress

Ever added an image to your blog post, right or left aligned it and then later discovered it crowded your text on phones or tablets?

That’s because it’s fixed at a certain width, so when you shrink your screen size the image takes up more and more space.

Lucky there’s a very quick and easy fix!

We can make the maximum width of a left or right aligned image a percentage of the page width. Here’s how with a video and written instructions underneath.

PLEASE NOTE: Due to Block Editor Update, the code in this video will no longer work, but it has been updated below. The code you copy and paste below is updated to suit both editors.

Please Note: By playing any videos on this page, you hereby consent to the use of YouTube’s Cookies.

Subscribe to my YouTube Channel Here

Here’s the step by step.

Log into WordPress, head to your Theme Customizer (if you get lost, head to Appearance -> Customize).

Once it’s open, head down to ‘Additional CSS‘. Copy and Paste one of the following codes….

Option 1 – Fix the width of left or right aligned images

.wp-block-image .alignleft, .wp-block-image .alignright, .alignleft, .alignright {max-width: 45%;}

Option 2 – Fix the width of left or right aligned images AND make full width on phones

@media screen and (min-width: 500px) {
.wp-block-image .alignleft, .wp-block-image .alignright, .alignleft, .alignright {max-width: 45%;}
}
@media screen and (max-width: 499px) {
.wp-block-image .alignleft, .wp-block-image .alignright, .alignleft, .alignright {width: 100%;}
}

I hope that quick little tutorial was useful. For more like it consider subscribing.

Otherwise, have an excellent day and thanks for dropping by!

Related Posts for WordPress Advice & Tutorials

How to fix the Maximum Width of Left & Right Aligned Images in WordPress

Here’s the step by step.

Submit a Comment Cancel reply