[wp-trac] [WordPress Trac] #44830: Media modal close icon is not aligned in center in 480px screen size in media modal

[WordPress Trac]

#44830: Media modal close icon is not aligned in center in 480px screen size in
media modal
----------------------------+-----------------------------
 Reporter:  Mahvash Fatima  |      Owner:  (none)
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  General         |    Version:  4.9.8
 Severity:  normal          |   Keywords:  has-patch
  Focuses:                  |
----------------------------+-----------------------------
 == Screenshot
 [[Image(https://user-
 images.githubusercontent.com/12367607/44442593-c58ebc00-a5f0-11e8-8241-54c1ab3e67e1.png)]]


 == Screenshot description
 You can see that the close icon is not aligned in center in 480px screen.


 == History
 In this ticket https://core.trac.wordpress.org/ticket/29339 the media
 modal header was made shorter in 480px screen for better responsive view.
 To make the header shorter in 480px screen the following code was added
 for media modal close icon -


 {{{
 @media only screen and (max-width: 480px) {

     .upload-php .media-modal-close {
         width: 40px;
         height: 40px;
     }

     .upload-php .media-modal-close .media-modal-icon {
         margin: 9px 10px;
     }
 }

 }}}

 **Above code description:**


 `.upload-php .media-modal-close` height is decreased from 50px to 40px in
 480px screen size to make the media modal header shorter.


 `.upload-php .media-modal-close .media-modal-icon` has 14px margin in
 bigger screen which was overwritten in 480px screen size to align the icon
 in center.


 **Reference of the above code**:
 https://core.trac.wordpress.org/changeset/29632


 ----


 In ticket https://core.trac.wordpress.org/ticket/26550 the following code
 was removed from the media modal close icon in bigger screen -


 {{{
 .upload-php .media-modal-close .media-modal-icon {
         margin: 14px;
         width: 22px;
 }

 .media-modal-close span.media-modal-icon {
     display: block;
     margin-top: 5px;
     width: 30px;
     height: 15px;
     text-align: center;
 }
 }}}


 **Reference of the above code**:
 https://core.trac.wordpress.org/changeset/32952


 == Reason

 The `.upload-php .media-modal-close .media-modal-icon` had margin of 14px
 in bigger screen.

 {{{
 .upload-php .media-modal-close .media-modal-icon {
     margin: 14px;
 }
 }}}


 ----


 here the `.upload-php .media-modal-close .media-modal-icon` was
 overwriting the margin in 480px screen to make the media modal header
 smaller for better responsive view.
 {{{
 @media only screen and (max-width: 480px) {

     .upload-php .media-modal-close .media-modal-icon {
         margin: 9px 10px;
     }

 }
 }}}

 because the `.upload-php .media-modal-close .media-modal-icon` margin has
 been removed from bigger screen in
 https://core.trac.wordpress.org/changeset/32952 so there is no need to
 adjust its margin in 480px screen to align it in center.


 == Proposed Solution

 To align the media modal close icon in center, you need to remove its
 margin from 480px screen size.

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