Make WordPress Core

#61059 closed defect (bug) (worksforme)

Root-Level Padding Breaks Layouts on Twenty Twenty-Four Theme

Reported by: script2see's profile script2see Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.5
Component: Bundled Theme Keywords: 2nd-opinion reporter-feedback close dev-feedback
Focuses: css Cc:

Description

The following root-level padding from the Twenty Twenty-Four theme's theme.json file breaks page and post layouts and results in unpredictable shifts in the layouts, depending on browser and viewport size"

"spacing": {
			"blockGap": "1.2rem",
			"padding": {
				"left": "var(--wp--preset--spacing--50)",
				"right": "var(--wp--preset--spacing--50)"
			}
		}

When the padding is nulled out, layouts return to normal. I tested the following and got much more predictable layouts:

"styles": {
	"spacing": {
				"padding": {
				"left": "0",
				"right": "0"
			}
		}
}

Traditionally, margins and padding for the body tag have been set to 0, as per CSS resets such as the following from Eric Meyer: https://meyerweb.com/eric/tools/css/reset/.

Attachments (2)

twenty-twenty-four-with-root-padding.jpg (191.7 KB) - added by script2see 10 months ago.
Twenty Twenty-Four Theme with Default Root-Level Padding (2k Screen Resolutoion in Chrome Developer
twenty-twenty-four-without-root-padding.jpg (192.2 KB) - added by script2see 10 months ago.
Twenty Twenty-Four Theme After Removal of Root-Level Padding (2k Screen Resolution in Chrome Developer)

Download all attachments as: .zip

Change History (6)

#1 @poena
10 months ago

  • Keywords reporter-feedback added

Hi

Can you please include more precise details about what you mean with it breaking the page and post layout, and what you mean with unpredictable shifts in the layout.

Please also include which viewport sizes the problem happens in, in which browsers and operating systems.

This information is needed for others to be able to try to reproduce the problem.
Recordings and full screen screenshots may help if this is difficult to describe.

@script2see
10 months ago

Twenty Twenty-Four Theme with Default Root-Level Padding (2k Screen Resolutoion in Chrome Developer

@script2see
10 months ago

Twenty Twenty-Four Theme After Removal of Root-Level Padding (2k Screen Resolution in Chrome Developer)

#2 @poena
10 months ago

  • Keywords close added

Thank you for the screenshots.
The screenshots shows a heavily customized design, not the themes default design.
It is likely that the problems are caused by these customizations.

Does the problem still happen with a fresh install of WordPress and the theme without any customizations? I am not able to reproduce it.
Removing the spacing at this time would change the look of existing websites in a way that would be unexpected to users, and the theme would no longer match the original design.

If you are not able to create the design you need without removing the spacing, I suggest removing it by using a child theme.

#3 @script2see
10 months ago

Hi.

I just overrode the default root-level padding in theme.json from my child theme of Twenty Twenty-Four, and the problem is gone. But I think root-level padding can and will cause problems for anyone modifying the theme layout to suit his or her needs.

#4 @karmatosed
10 months ago

  • Keywords dev-feedback added
  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

@script2see as this doesn't happen without customizations and to actually adjust root-level padding is adjusting the entire theme, I am going to close this for now. That doesn't mean you can't have something help though on this, you absolutely can within the support forums when customizing themes.

If this isn't something you feel happy about we absolutely can review with @poena. For now, I am closing though.

Note: See TracTickets for help on using tickets.