[wp-trac] [WordPress Trac] #48617: Twenty Twenty: Figure elements with inline style can overflow content bounds

[WordPress Trac]

#48617: Twenty Twenty: Figure elements with inline style can overflow content
bounds
---------------------------+-----------------------------
 Reporter:  Anlino         |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:  5.3
 Severity:  normal         |   Keywords:
  Focuses:                 |
---------------------------+-----------------------------
 In content created in the classic editor, images that have captions and
 are set to alignnone or aligncenter can exceed the width of the entry
 content. This is caused by the inline style on the figure element
 overwriting the `width` set on `.entry-content > *` in style.css.

 **Steps to reproduce:**
 1. Add an image while using the classic editor.
 2. Set it to alignnone or aligncenter.
 3. Add a caption.
 4. Check on a screen size thinner than the width of the image.

 **Suggested solution:**
 (Condensed for clarity)

 {{{#!css
 .entry-content figure.alignnone[style*="width"],
 .entry-content figure.aligncenter[style*="width"] {
         max-width: calc(100% - 4rem) !important;
 }

 @media ( min-width: 620px ) {
         body:not(.template-full-width) .entry-content
 figure.alignnone[style*="width"],
         body:not(.template-full-width) .entry-content
 figure.aligncenter[style*="width"] {
                 max-width: 58rem !important;
         }
 }

 @media ( min-width: 1280px ) {
         body.template-full-width .entry-content
 figure.alignnone[style*="width"],
         body.template-full-width .entry-content
 figure.aligncenter[style*="width"] {
                 max-width: 120rem !important;
         }
 }
 }}}

 First reported by @derlynad.

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