Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#55404 new defect (bug)

Twenty Twenty-Two, Site Edit, Group with Background Color Overflows Page Size on Mobile

Reported by: joshuanan's profile joshuanan Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 5.9.2
Component: Bundled Theme Keywords:
Focuses: ui, css, template Cc:

Description

When you add a group block with a background color to a footer template in the full site editor, the group block will overflow the page on a mobile device by a few pixels. For example, on a device that is 360 pixels wide will have approximately 10 pixels of overflow. The offending party is this CSS code:

.wp-site-blocks .alignfull, .wp-site-blocks > .wp-block-group.has-background, .wp-site-blocks > .wp-block-cover, .wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background, .wp-site-blocks > .wp-block-template-part > .wp-block-cover, body > .is-root-container > .wp-block-cover, body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background, body > .is-root-container > .wp-block-template-part > .wp-block-cover, .is-root-container .wp-block[data-align="full"] {
  margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  width: unset;
}

Where margin-right is the source of the problem. Turning that style off in my browser's developer console eliminates the extra space.

Attachments (2)

Capture.PNG (490.7 KB) - added by joshuanan 2 years ago.
Capture2.PNG (490.3 KB) - added by joshuanan 2 years ago.

Download all attachments as: .zip

Change History (3)

@joshuanan
2 years ago

@joshuanan
2 years ago

#1 @SergeyBiryukov
2 years ago

  • Component changed from Formatting to Bundled Theme
Note: See TracTickets for help on using tickets.