Making WordPress.org

Opened 4 weeks ago

Last modified 3 weeks ago

#8247 new defect (bug)

Responsive spacing issue on Education site

Reported by: vishitshah's profile vishitshah Owned by:
Milestone: Priority: normal
Component: WordPress.org Site Keywords:
Cc:

Description (last modified by dd32)

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:

  1. Open the page on a mobile device or responsive mode.
  2. Scroll to the The Initiatives section.
  3. Notice the left/right spacing inconsistency around the heading and content.

Attachments (1)

spacing-issue-canada-education.png (164.1 KB) - added by vishitshah 4 weeks ago.

Download all attachments as: .zip

Change History (4)

#1 @dd32
4 weeks ago

  • Component changed from General to WordPress.org Site
  • Description modified (diff)

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

#2 @dd32
4 weeks ago

  • Summary changed from Responsive spacing issue on Canada Education site to Responsive spacing issue on Education site

#3 @beaubhavik
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.

Last edited 3 weeks ago by beaubhavik (previous) (diff)
Note: See TracTickets for help on using tickets.