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

[sumitsingh]

Hi,

Design issue in customize.php on Twenty Twenty theme.

For more information sees mention screenshot.

Thanks

[sumitsingh]

Bug screenshot file

[sumitsingh]

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);

}

[sabernhardt]

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

[sabernhardt]

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.

[sumitsingh]

Hi Guys,

Any update about this things?

[sabernhardt]

only applies reduced width to the footer nav/widgets container

[sabernhardt]

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.

[karmatosed]

Assigning to myself to test and review.

[karmatosed]

In 58778:

Twenty Twenty: Fixes Customizer widget edit buttons being obstructed on smaller screens.

When the screen is smaller the edit buttons are obscured. This resolves that problem for the smaller screens and only targets the container for footer navigation and widgets.

Props sumitsingh, SergeyBiryukov, sabernhardt.
Fixes #49008.