[wp-trac] [WordPress Trac] #48691: Twenty Twenty: Audio block alignment issue

[WordPress Trac]

#48691: Twenty Twenty: Audio block alignment issue
-----------------------------------------+-------------------------
 Reporter:  kharisblank                  |       Owner:  nielslange
     Type:  defect (bug)                 |      Status:  assigned
 Priority:  normal                       |   Milestone:  5.3.1
Component:  Bundled Theme                |     Version:  5.3
 Severity:  normal                       |  Resolution:
 Keywords:  needs-patch has-screenshots  |     Focuses:  ui, css
-----------------------------------------+-------------------------

Comment (by kharisblank):

 I used this improved code (only for right alignment at this time). In this
 code I attempted to maintain the HTML5 audio minimum width to avoid
 unaccessible audio controls.

 {{{
 .entry-content > .wp-block-audio.alignright {
    max-width: 100%;
 }

 @media only screen and (min-width: 480px) {
   .entry-content > .wp-block-audio.alignright {
     min-width: 0;
     padding-right: 2rem;
   }
 }

 @media only screen and (min-width: 1000px) {
   .entry-content > .wp-block-audio.alignright {
     position: static;
     margin-right: 0;
     left: auto;
     max-width: 100%;
   }
 }

 @media only screen and (min-width: 1280px) {
   .entry-content > .wp-block-audio.alignright {
     max-width: unset;
     left: auto;
   }
 }
 }}}

 This is what I am getting (on Firefox). I tested with Chrome as well and
 it behaves the same way.

 [[Image(https://i.imgur.com/qYNadRs.gif)]]

 I believe this code still need some testings at your end. I'd like to hear
 your thought on this.

 **Extra question:**

 Does anybody know why lesser width of the audio always appears like on
 Safari, even when my custom code removed?

 [[Image(https://i.imgur.com/maC1Wno.png)]]

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