WordPress.org

Make WordPress Core

Opened 10 months ago

Last modified 6 weeks ago

#44830 accepted defect (bug)

Media modal close icon is not aligned in center in 480px screen size in media modal

Reported by: Mahvash Fatima Owned by: joemcgill
Milestone: 5.3 Priority: normal
Severity: normal Version: 4.9.8
Component: Media Keywords: has-patch has-screenshots commit
Focuses: ui Cc:

Description (last modified by SergeyBiryukov)

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.

Attachments (2)

44830.diff (439 bytes) - added by Mahvash Fatima 10 months ago.
44442593-c58ebc00-a5f0-11e8-8241-54c1ab3e67e1.png (418.9 KB) - added by SergeyBiryukov 10 months ago.

Download all attachments as: .zip

Change History (6)

#1 @mukesh27
10 months ago

  • Component changed from General to Media
  • Focuses ui added

#2 @SergeyBiryukov
10 months ago

  • Description modified (diff)
  • Keywords has-screenshots added

#3 @joemcgill
2 months ago

  • Keywords commit added
  • Milestone changed from Awaiting Review to 5.3
  • Owner set to joemcgill
  • Status changed from new to accepted

Hi @mahvash-fatima,

Thanks for the detailed report and patch, which still applies and seems to fix the issue. We're nearing RC for 5.2, so I'm going to mark for commit during the next cycle.

#4 @truchot
6 weeks ago

Hi !

Maybe display: flex; with justify-content: center; and align-items: center; will do the job, no?

Note: See TracTickets for help on using tickets.