Education page right column below photo banner compresses Learn-Build-Connect text paragraph text on mobile

[dpknauss]

Location: ​https://en-ca.wordpress.org/education/

The following column paragraph has excessive padding on small/mobile responsive viewports that forces the paragraph text into a narrow single letter-by-letter text column:

<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:570px">
<p class="has-text-align-left has-light-grey-2-color has-text-color has-link-color has-eb-garamond-font-family has-heading-2-font-size wp-elements-ebd93364a02feac13f4546b9c7ed0a4a wp-block-paragraph" style="padding-right:var(--wp--preset--spacing--70);padding-left:174px">Learn.<br>Build.<br>Connect.</p>
</div>

[dpknauss]

screenshot from iphone: ​https://en-ca.wordpress.org/education/

[parinpanjari]

I can confirm this issue. Here's a root cause analysis and proposed fix.

Root Cause:

The "Learn. Build. Connect." paragraph has hardcoded inline styles that don't adapt to smaller viewports:

padding-left: 174px;
padding-right: var(--wp--preset--spacing--70); /* resolves to 100px */

The font size on this element is 50px (heading-2). On desktop, the parent column has flex-basis: 570px, leaving ~296px for text — enough room. But on mobile (e.g. iPhone at 375px), after the columns stack, the content area is roughly 335px. Subtracting 274px of combined horizontal padding leaves only 61px for text — barely enough for a single character at 50px font size.

There is no responsive CSS override for this element in any stylesheet — confirmed by scanning all loaded CSS rules.

Proposed CSS Fix:

Since the padding is set via inline styles on a block element, it requires a media query override:

@media (max-width: 781px) {
    .wp-block-column > .has-eb-garamond-font-family.has-heading-2-font-size {
        padding-left: var(--wp--preset--spacing--40) !important;
        padding-right: var(--wp--preset--spacing--40) !important;
    }
}

Notes on this fix:

• The 781px breakpoint matches WordPress core's column stacking threshold.
• --wp--preset--spacing--40 resolves to clamp(30px, 5vw, 50px) on this site, so it scales responsively.
• The !important is necessary to override the inline styles.
• The selector matches exactly one element on the page (verified).
• After applying this fix, the text area increases from 61px to 518px — fully readable.

Alternative approach: Edit the block content directly to replace padding-left: 174px with padding-left: clamp(24px, 10vw, 174px) as an inline style, which would scale naturally without needing a media query override.

Tested by resizing the browser and verifying computed styles at multiple viewport widths. Happy to provide a formal patch if pointed to the right stylesheet.