WordPress.org

Make WordPress Core

Opened 4 weeks ago

Last modified 10 days ago

#49075 new defect (bug)

Twenty Twenty: Inserted images not responsive at smaller browser widths

Reported by: JarretC Owned by:
Milestone: 5.4 Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-patch needs-testing
Focuses: Cc:
PR Number:

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%

Change History (1)

#1 @ianbelanger
10 days ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 5.4
  • Version set to 5.3
Note: See TracTickets for help on using tickets.