[wp-trac] [WordPress Trac] #56748: Twenty Twenty-One: Image stuck to text in responsive sizes (was: Image stuck to text in responsive in twentytwentyone theme)

[WordPress Trac]

#56748: Twenty Twenty-One: Image stuck to text in responsive sizes
---------------------------+------------------------------
 Reporter:  sagarladani    |       Owner:  (none)
     Type:  defect (bug)   |      Status:  assigned
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:  has-patch      |     Focuses:  css
---------------------------+------------------------------
Changes (by sabernhardt):

 * focuses:  ui, css => css
 * component:  General => Bundled Theme


Comment:

 Thanks for the report and patch!

 The block-library styles make the images float (and add a different
 margin) even at small screen sizes.
 {{{
 .wp-block-image .alignleft {
  float:left;
  margin:.5em 1em .5em 0;
 }
 .wp-block-image .alignright {
  float:right;
  margin:.5em 0 .5em 1em
 }
 }}}

 For Twenty Twenty-One, styles need to be
 [https://core.trac.wordpress.org/browser/trunk/src/wp-
 content/themes/twentytwentyone/assets/sass/05-blocks/image/_style.scss#L57
 updated in the SASS]. It might be good to set the top margin to zero, too,
 for the `alignleft` and `alignright` classes (earlier in the SASS file).

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56748#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform