Make WordPress Core

Opened 3 years ago

Last modified 3 years ago

#49075 reopened defect (bug)

Twenty Twenty: Inserted images not responsive at smaller browser widths

Reported by: jarretc's profile JarretC Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-testing has-patch reporter-feedback
Focuses: css Cc:

Description

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%

Attachments (1)

style.css.patch (649 bytes) - added by garethgillman 3 years ago.
added max-width parameter for devices under 58rem

Download all attachments as: .zip

Change History (6)

#1 @ianbelanger
3 years ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 5.4
  • Version set to 5.3

@garethgillman
3 years ago

added max-width parameter for devices under 58rem

#2 @garethgillman
3 years ago

  • Resolution set to invalid
  • Status changed from new to closed

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

#3 @ianbelanger
3 years ago

  • Focuses css added
  • Keywords has-patch added; needs-patch removed
  • Resolution invalid deleted
  • Status changed from closed to reopened

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.

#4 @garethgillman
3 years ago

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

#5 @ianbelanger
3 years ago

  • Keywords reporter-feedback added
  • Milestone changed from 5.4 to Future Release

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

Note: See TracTickets for help on using tickets.