WordPress.org
Get WordPress

Make WordPress Core

Opened 4 years ago

Last modified 6 months ago

#49009 new defect (bug)

Customizer header overlaps top of preview at small screen sizes

Reported by: sumitsingh's profile 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 4 years ago.
Error screenshot file
Customize wpfdemo – Just another WordPress site-2.png​ (131.8 KB) - added by sumitsingh 4 years ago.
Error 2 screenshot file
Add New Post ‹ wpfdemo — WordPress.png​ (23.8 KB) - added by sumitsingh 4 years ago.
Error 3 screenshot file
49009.patch​ (855 bytes) - added by sabernhardt 2 years ago.

Download all attachments as: .zip

Change History (9)

@sumitsingh
4 years ago

Error screenshot file

#1 @sumitsingh
4 years ago

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

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

#customize-preview {

margin-top: 45px;

}

}

@sumitsingh
4 years ago

Error 2 screenshot file

@sumitsingh
4 years ago

Error 3 screenshot file

#2 @SergeyBiryukov
4 years 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
2 years 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
2 years ago

#4 @sabernhardt
2 years ago

  • Keywords has-patch needs-testing added

#5 @pooja1210
6 months ago

Hi,

Test report for https://core.trac.wordpress.org/attachment/ticket/49009/49009.patch

Environment:
WordPress- V6.2.2
Os- Mac
Browser- Chrome

Expected Result: In customizer preview the customize button should be visible properly ☑️

Screenshots:
Before: ​https://prnt.sc/8eCeZqR30761
After: ​https://prnt.sc/KgxrLMbHUAsS

The patch is working fine for the 1st error and 2nd, 3rd issue is not reproducible.

Thanks!

Note: See TracTickets for help on using tickets.