Twenty Twenty: Inserted images not responsive at smaller browser widths

[JarretC]

Reported on the forums here initially:

​https://wordpress.org/support/topic/posts-images-are-not-responsive

When decreasing the browser width down to the > 600px width you'll start to see some images being cut off. This is due to the following code:

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 58rem;
	width: calc(100% - 4rem);
}

As inserted images are placed inside of a <figure> element the code sets the max-width to something wider than what the browser width is. If the inserted image has a width set inline, it'll cause it to display past the border of the browser.

max-width could be set to either 100% in this case or could be targeted using media queries to something where if the browser width is less than 600px the max-width is then set to 100%

[garethgillman]

added max-width parameter for devices under 58rem

[garethgillman]

My first attempt at a patch, added a max-width for devices under 58rem which fixes the issue.

[ianbelanger]

Hi @garethgillman,

Thanks for the patch. I'll review it and see if it should be committed. FYI, you should not close a ticket after submitting a patch. It needs to stay open in order to be reviewed and possibly committed to core.

[garethgillman]

@ianbelanger didn't mean too, slip of the finger, will double check next time :)

[ianbelanger]

Hi @garethgillman,

Can you provide a little more information on how you created this issue? I cannot seem to recreate it in any of my testing.

Thanks