Opened 7 years ago
Closed 7 years ago
#42359 closed defect (bug) (fixed)
Widgets and Menus panels break in small screen
Reported by: | Mahvash Fatima | Owned by: | westonruter |
---|---|---|---|
Milestone: | 4.9 | Priority: | high |
Severity: | normal | Version: | 4.9 |
Component: | Customize | Keywords: | has-patch |
Focuses: | ui | Cc: |
Attachments (5)
Change History (13)
#1
@
7 years ago
- Keywords needs-patch added
- Milestone changed from Awaiting Review to 4.9
- Priority changed from normal to high
#4
@
7 years ago
@Mahvash-Fatima The patch tests well, but something seems not quite right in that there are multiple media queries targeting the same element to give it margin-left: 0
. Do some rules need to be combined/refactored? See multiple-media-queries.png.
#6
in reply to:
↑ 5
@
7 years ago
Replying to Mahvash Fatima:
I found one more issue. The Publish Settings section is not visible between small sizes ( 640px - 600px ). The attached patch is to fix that. This is temporary, I am working to fix and improve it.
@Mahvash-Fatima Are your new patches intended to implement the fix and improvement? Anything else left to do as far as you are concerned?
#7
@
7 years ago
#42359.2.diff is to implement the fix and improvement. I think there is nothing else left.
About the changes -
- Move
.wp-full-overlay.expanded { margin-left: margin-left: 0; }
from screen size 640px to screen size 600px.
- Remove
.outer-section-open .wp-full-overlay.expanded { margin-left: 0; }
from screen size 640px because.wp-full-overlay.expanded
already havemargin-left: 0
and there is no need to givemargin-left: 0
to.outer-section-open .wp-full-overlay.expanded
. I think, this is unnecessary.
- Remove
.wp-full-overlay.expanded { margin-left: 300px; }
from screen size 640px because it is overwritten in full screen size.
- Move
body.adding-widget div#available-widgets, body.adding-menu-items div#available-menu-items, body.outer-section-open div#customize-sidebar-outer-content { top: 46px; z-index: 10; }
from screen size 640px to 600px
and remove left: 0;
from screen size 640px because left: 0;
is overwritten in full screen size.
- Move
body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content { left: -100%; } body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content { left: 0; }
from screen size 640px to 600px
Able to replicate. @westonruter this seems like a recent change — any idea what would have affected it?