[wp-trac] [WordPress Trac] #49075: Twenty Twenty: Inserted images not responsive at smaller browser widths

[WordPress Trac]

#49075: Twenty Twenty: Inserted images not responsive at smaller browser widths
---------------------------+-----------------------------
 Reporter:  JarretC        |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:
 Severity:  normal         |   Keywords:  needs-patch
  Focuses:                 |
---------------------------+-----------------------------
 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%

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/49075>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform