Make WordPress Core

Opened 2 years ago

Closed 5 days ago

#55404 closed defect (bug) (wontfix)

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

Reported by: joshuanan's profile joshuanan Owned by:
Milestone: Priority: normal
Severity: minor Version: 5.9.2
Component: Bundled Theme Keywords: needs-testing reporter-feedback close
Focuses: ui, css, template Cc:


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

2 years ago

2 years ago

#1 @SergeyBiryukov
2 years ago

  • Component changed from Formatting to Bundled Theme

#2 @karmatosed
2 months ago

  • Keywords needs-testing added

#3 @karmatosed
10 days ago

  • Keywords reporter-feedback added

I am struggling to replicate this. It could be that we need more steps though. Could you please provide them?

#4 @karmatosed
5 days ago

  • Keywords close added

I am going to recommend that we close this for now as I am unable to replicate and we don't have any more information. We can of course reopen this or not progress if we get more details. Thanks everyone.

#5 @karmatosed
5 days ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

For now, let's close this and move forward if we have more information. Thank you everyone for the collaboration.

Note: See TracTickets for help on using tickets.