Make WordPress Core

Opened 5 years ago

Closed 3 months ago

#49075 closed defect (bug) (worksforme)

Twenty Twenty: Inserted images not responsive at smaller browser widths

Reported by: jarretc's profile JarretC Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-testing has-patch reporter-feedback close
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 4 years ago.
added max-width parameter for devices under 58rem

Download all attachments as: .zip

Change History (8)

#1 @ianbelanger
5 years ago

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

@garethgillman
4 years ago

added max-width parameter for devices under 58rem

#2 @garethgillman
4 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
4 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
4 years ago

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

#5 @ianbelanger
4 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

#6 @karmatosed
4 months ago

  • Keywords close added

I am also struggling to reproduce this and it might be the passing of time has resolved this. That said, for now I am going to recommend we close by adding the keyword. We can always revisit if more information that helps recreation is added. Thank you everyone for collaborating on this.

#7 @karmatosed
3 months ago

  • Milestone Future Release deleted
  • Resolution set to worksforme
  • Status changed from reopened to closed

I am going to go ahead and close this, thank you.

Note: See TracTickets for help on using tickets.