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: |
|
Owned by: |
|
---|---|---|---|
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 )
Screenshot
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.
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.