Overflow
Rules for content that doesn't fit its container — the failure cases dynamic CMS strings create that fixed demo copy never surfaces. Every rule here trades a little type scale for a layout guarantee that must never break.
Blog Title overflow
Post titles (marketing-pagehead__title) are dynamic CMS strings, not authored copy — the Probate Q&A series in particular runs full questions as titles, well past anything the fluid --step-5 scale was tuned for. --compact / --tight already step the size down by character count; this rule sets the floor those tiers stop at and what happens once a title still won't fit below it.
| State | Rule |
|---|---|
| Ideal | Fit the title on 2 lines max. Step the size down (--compact, --tight, or a new intermediate tier if needed) as far as it takes to hit 2 lines — but never below h3 (var(--step-1), 1.42rem). h3 is the smallest size a page title is allowed to read as; below it, it stops reading as a headline. |
| Fallback | If the title still won't fit in 2 lines at the h3 floor, stop shrinking. Drop to a dedicated overflow style fixed at 24px at 100% browser scale — a literal pixel value, not another step on the fluid clamp() scale — and let it wrap past 2 lines. A long title reading clearly on 4–6 lines beats a short one truncated or squeezed unreadably thin. |
--tight exists to buy back line count, and the fluid scale keeps shrinking with viewport width — at narrow widths a clamp-based floor can still read smaller than intended. The fallback needs a hard, predictable floor, so pin it as a literal token (e.g. --type-title-overflow-floor: 24px) instead of extending the --step-* ramp.
Can I contest a will in North Carolina?
How can representatives determine if MCA loans are enforceable against a probate estate in North Carolina? Specifically, what contractual conditions—like default events or business dissolution—trigger personal guarantees, and how might predatory terms or fraudulent transfers allow an estate to avoid or challenge these liabilities?
Keep the lead form above the fold
On a single post, the Free Case Evaluation form (Sidebar.astro) is pulled up out of the ivory article band into the deep pagehead band with a fixed negative margin — .plg-postband .plg-side { margin-top: -440px } on desktop — so it lands beside the title instead of below the fold. That value assumes a bounded pagehead height.
| Rule | Why |
|---|---|
| The form must stay above the fold regardless of title length. | It's the primary conversion moment on every post. A title that pushes it below the fold costs a lead, not just a layout glitch. |
The Blog Title overflow rule above is what makes the -440px overlap safe. Any change to the title's max rendered height (new tier, new floor, new max-width) must be re-checked against the fold on both the 2-line ideal case and the fallback case. | The overlap is a fixed pixel value tuned to a bounded pagehead height, not a fluid calculation — it doesn't self-correct if the title grows taller than expected. |
| When shipping a page with the longest realistic title (the fallback case, wrapped 4–6 lines), verify the form's submit button — not just its top edge — clears the fold at common viewport heights (≈800–900px). | A form that's technically visible but cut off before its submit button isn't usable above the fold. |