![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 2 months ago
Last modified 2 months ago
#8247 new defect (bug)
Responsive spacing issue on Education site
| Reported by: | vishitshah | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | |
| Component: | WordPress.org Site | Keywords: | |
| Cc: |
Description (last modified by )
On mobile/responsive view, the The Initiatives section on the WordPress Education ( https://wordpress.org/education/ ) has inconsistent left and right padding compared to other sections on the page. The content appears too close to the edges, which affects the overall alignment and readability.
Steps to reproduce:
- Open the page on a mobile device or responsive mode.
- Scroll to the The Initiatives section.
- Notice the left/right spacing inconsistency around the heading and content.
Attachments (1)
Change History (4)
#2
@
2 months ago
- Summary Responsive spacing issue on Canada Education site → Responsive spacing issue on Education site
#3
@
2 months ago
Hi, I tested this on mobile responsive view (iPhone 12 Pro).
The Initiatives section on https://wordpress.org/education/ has inconsistent left/right padding compared to other sections on the page.
This appears to be a CSS padding issue on the block container. The section's wrapping .wp-block-group is missing consistent
padding-inline that other sections have.
Suggested fix:
Add matching padding to that section's container:
padding-inline: var(--wp--style--root--padding-right, 1.5rem);
This can also be corrected from Site Editor → Group block → Dimensions → Padding to match adjacent sections.
Happy to test a patch if needed.
FYI @piyopiyofox as the last editor of this page. No, I don't really know the best way to fix this, I don't know if it's the content, or if this should be filed on https://github.com/wordpress/wporg-main-2022/ as a CSS issue