[wp-meta] [Making WordPress.org] #8240: Education page right column below photo banner compresses Learn-Build-Connect text paragraph text on mobile

[Making WordPress.org]

#8240: Education page right column below photo banner compresses Learn-Build-
Connect text paragraph text on mobile
-------------------------------------------------+-------------------------
 Reporter:  dpknauss                             |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:
Component:  General                              |  Resolution:
 Keywords:  has-screenshots needs-design-        |
  feedback has-patch                             |
-------------------------------------------------+-------------------------
Changes (by parinpanjari):

 * keywords:  has-screenshots needs-design-feedback => has-screenshots
     needs-design-feedback has-patch


Comment:

 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:

 {{{#!css
 @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.

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/8240#comment:1>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org