WordPress Logo

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.

Watch on YouTube

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.

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