[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:  Media                      |     Version:  4.9.8
 Severity:  normal                     |  Resolution:
 Keywords:  has-patch has-screenshots  |     Focuses:  ui
---------------------------------------+------------------------------
Changes (by SergeyBiryukov):

 * keywords:  has-patch => has-patch has-screenshots


Old description:

> == 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.

New description:

 == Screenshot
 https://core.trac.wordpress.org/attachment/ticket/44830/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 #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**: [29632]


 ----


 In 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**: [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 [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#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform