Make WordPress Core

Opened 4 years ago

Last modified 2 days ago

#49008 new defect (bug)

Twenty Twenty: Customizer widgets' edit buttons are partially obstructed on smaller screens

Reported by: sumitsingh's profile sumitsingh Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.3.1
Component: Bundled Theme Keywords: has-patch has-screenshots needs-testing
Focuses: ui, css, administration Cc:

Description

Hi,

Design issue in customize.php on Twenty Twenty theme.

For more information sees mention screenshot.

Thanks

Attachments (4)

Customize wpfdemo – Just another WordPress site.png (73.0 KB) - added by sumitsingh 4 years ago.
Bug screenshot file
49008.patch (964 bytes) - added by sabernhardt 3 years ago.
Twenty Twenty at iPad size with adjustment to section-inner class width
2020-customizer-preview-ipad-size-with-patch.png (105.5 KB) - added by sabernhardt 3 years ago.
49008.1.patch (1.0 KB) - added by sabernhardt 2 days ago.
only applies reduced width to the footer nav/widgets container

Download all attachments as: .zip

Change History (9)

#1 @sumitsingh
4 years ago

I have also a solution. changed width: calc(100% - 4rem); to width: calc(100% - 8rem); in wp-content/themes/twentytwenty/style.css

.section-inner {

margin-left: auto;
margin-right: auto;
max-width: 120rem;
width: calc(100% - 8rem);

}

#2 @SergeyBiryukov
4 years ago

  • Component changed from Customize to Bundled Theme
  • Summary changed from Design issue in Ipad to Twenty Twenty: Design issue in Customizer on iPad

@sabernhardt
3 years ago

Twenty Twenty at iPad size with adjustment to section-inner class width

#3 @sabernhardt
3 years ago

  • Keywords has-patch has-screenshots added

Related: #46969 shows the same issue in Twenty Nineteen, and buttons can be cut off even more in Twenty Twenty-One. Ideally, this could be fixed in the Customizer, though I'm not convinced it can.

Twenty Fourteen and Twenty Seventeen already adjust the site title and/or edit buttons.

So 49008.patch reduces the width of Twenty Twenty's section-inner class in the Customizer to make space for the footer widgets' Edit buttons, as recommended above.

#4 @sumitsingh
2 years ago

Hi Guys,

Any update about this things?

@sabernhardt
2 days ago

only applies reduced width to the footer nav/widgets container

#5 @sabernhardt
2 days ago

  • Keywords needs-testing added
  • Summary changed from Twenty Twenty: Design issue in Customizer on iPad to Twenty Twenty: Customizer widgets' edit buttons are partially obstructed on smaller screens

The first patch had affected some elements within the content area (on a home page of posts). The revised patch targets only the container for footer navigation and widgets.

Note: See TracTickets for help on using tickets.