Session Overview

Sam asked to fix the hero headline on SA Element Registry element 61 (bsg-v4-editorial, the full-bleed Bigger Share Guarantee editorial page layout) so that Our Bigger Share stays together on one line and the word Share no longer drifts onto a line of its own. Scope was this one element in the registry, not the live WordPress page.

Importance: Medium. This is the approved design element library (source of truth for the BSG editorial layout). The fix is complete and persisted; no live homepage or WordPress deploy was touched. Mark as done.

What Was Accomplished

Reproduced the problem first. At 1280px the H1 Our Bigger Share Guarantee® was breaking as three lines: Our Bigger / Share / Guarantee®. Cause: the hero H1 uses the global clamp(46px, 6vw, 80px) size against a max-width:560px and a ~544px text column, so the long phrase wrapped and orphaned Share.

Fix applied (two surgical edits via the registry admin form at /admin/edit/61, POST):

1. HTML: wrapped the phrase in a non-breaking span.
   • Old: <h1>Our Bigger Share <span class="accent">Guarantee...
   • New: <h1><span class="bsgv4-hero__nb">Our Bigger Share</span> <span class="accent">Guarantee...
2. CSS: added a hero-specific size plus the nowrap rule, and a mobile override.
   • Added to .bsgv4-hero__left h1: font-size: clamp(40px, 5.2vw, 68px);
   • Added rule: .bsgv4-hero__nb { white-space: nowrap; }
   • Inside @media (max-width: 900px): .bsgv4-hero__left h1 { font-size: clamp(30px, 8.5vw, 56px); }

Why this approach: a plain white-space:nowrap alone would have overflowed (the hero is overflow:hidden, so it would have clipped the headline) because at the original 80px the phrase is ~600px wide against a ~544px column. Lowering the hero H1 clamp so the phrase always fits its container, then forcing nowrap, keeps the phrase intact at every width and lets Guarantee® fall naturally to line two. Headline stays large and editorial (68px desktop max, was 80px).

Each replacement was verified to match exactly once before committing, so nothing else in the 28KB HTML / 22KB CSS was altered.

QA (Playwright, measured word-by-word)

Verified on the SAVED preview (/preview/61) after submit, by measuring the bounding box of every word and the text column:

• 360px: phrase one line, 28px margin each side, no horizontal scroll.
• 390px: one line, Guarantee below, no scroll.
• 768px and 910px (tightest 2-col column, 17px margin): pass.
• 1280px (24px margin) and 1440px (font caps at 68px, 53px margin): pass.

Every width shows line 1 = Our Bigger Share, line 2 = Guarantee®, and document.scrollWidth never exceeds the viewport. Screenshots captured at 1280 and 390.

What Did Not Work / Dead Ends Avoided

No failed attempts. Noted and avoided: a bare nowrap without shrinking the font would clip the headline (hero is overflow:hidden), and widening max-width would not have helped at 1280px because the binding constraint is the grid column width, not max-width.

Files and Locations