WordPress.org

Make WordPress Core

Opened 23 months ago

Last modified 8 weeks ago

#49009 new defect (bug)

Customizer header overlaps top of preview at small screen sizes

Reported by: sumitsingh Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.3.1
Component: Customize Keywords: has-patch needs-testing
Focuses: ui, css, administration Cc:

Description

Hi,

Design issue in customize.php on Twenty Twenty theme when preview page.

For more information sees mention screenshot.

Thanks

Attachments (4)

Customize wpfdemo – Just another WordPress site-1.png (41.8 KB) - added by sumitsingh 23 months ago.
Error screenshot file
Customize wpfdemo – Just another WordPress site-2.png (131.8 KB) - added by sumitsingh 23 months ago.
Error 2 screenshot file
Add New Post ‹ wpfdemo — WordPress.png (23.8 KB) - added by sumitsingh 23 months ago.
Error 3 screenshot file
49009.patch (855 bytes) - added by sabernhardt 8 weeks ago.

Download all attachments as: .zip

Change History (8)

#1 @sumitsingh
23 months ago

I have also a solution. Add below CSS in style.css

@media screen and (max-width: 640px) {

#customize-preview {

margin-top: 45px;

}

}

@sumitsingh
23 months ago

Error 3 screenshot file

#2 @SergeyBiryukov
23 months ago

  • Component changed from Customize to Bundled Theme
  • Summary changed from Design issue in Iphone 6/7/8 to Twenty Twenty: Design issue in Customizer on iPhone 6/7/8

#3 @sabernhardt
8 weeks ago

  • Component changed from Bundled Theme to Customize
  • Summary changed from Twenty Twenty: Design issue in Customizer on iPhone 6/7/8 to Customizer header overlaps top of preview at small screen sizes

This would need fixing within the Customizer. As an overlay, the header could cover editable elements (and their buttons) at the top of the site preview with many themes.

The themes filter search icon and button positioning could be better, too. Setting the filter toggle margin to 0 in r41893 apparently made sense at that time, but it seems to need a margin now for narrower screens.

The third issue above involves the block editor (and I think that has been fixed).

@sabernhardt
8 weeks ago

#4 @sabernhardt
8 weeks ago

  • Keywords has-patch needs-testing added
Note: See TracTickets for help on using tickets.