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: |
|
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)
Change History (6)
#1
@
3 years ago
- Keywords needs-testing added
- Milestone changed from Awaiting Review to 5.4
- Version set to 5.3
#2
@
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
@
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.
added max-width parameter for devices under 58rem