Opened 4 weeks ago
Last modified 3 weeks ago
#8247 new defect (bug)
Responsive spacing issue on Education site
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Priority: | normal | |
| 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
@
4 weeks ago
- Summary changed from Responsive spacing issue on Canada Education site to Responsive spacing issue on Education site
#3
@
3 weeks 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