Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#44830 closed defect (bug) (fixed)

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

Reported by: mahvash-fatima's profile Mahvash Fatima Owned by: joemcgill's profile 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 6 years ago.
44442593-c58ebc00-a5f0-11e8-8241-54c1ab3e67e1.png (418.9 KB) - added by SergeyBiryukov 6 years ago.

Download all attachments as: .zip

Change History (7)

@Mahvash Fatima
6 years ago

#1 @mukesh27
6 years ago

  • Component changed from General to Media
  • Focuses ui added

#2 @SergeyBiryukov
6 years ago

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

#3 @joemcgill
6 years 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 years ago

Hi !

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

#5 @joemcgill
5 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

This seems to be fixed since [45499]. Closing.

Note: See TracTickets for help on using tickets.