Opened 10 months ago
Closed 10 months ago
#61059 closed defect (bug) (worksforme)
Root-Level Padding Breaks Layouts on Twenty Twenty-Four Theme
Reported by: |
|
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)
Change History (6)
@
10 months ago
Twenty Twenty-Four Theme with Default Root-Level Padding (2k Screen Resolutoion in Chrome Developer
@
10 months ago
Twenty Twenty-Four Theme After Removal of Root-Level Padding (2k Screen Resolution in Chrome Developer)
#2
@
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
@
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
@
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.
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.