From bab33e0f65a3878be78e1363e0c8d46719a9ad43 Mon Sep 17 00:00:00 2001 From: Calum Muir Date: Fri, 12 Jun 2026 10:33:27 +0000 Subject: [PATCH] Fix mission blockquote overlapping donate button on mobile margin-top: auto collapses to 0 when the headline block fills the hero height (e.g. long H1 word-wrap on small phones). Replace inline auto with .hero-mission class: auto on desktop, clamp(40px, 6vh, 80px) on mobile for a guaranteed gap. Co-Authored-By: Claude Sonnet 4.6 --- src/pages/index.astro | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 902b828..ad12e51 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -167,6 +167,13 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor .scroll-indicator { display: none; } } + /* On mobile, margin-top: auto can collapse to 0 when the headline + fills most of the hero — enforce a minimum gap above the blockquote */ + .hero-mission { margin-top: auto; } + @media (max-width: 639px) { + .hero-mission { margin-top: clamp(40px, 6vh, 80px); } + } + /* Hero content padding: clear the fixed nav (mobile logo 80px + 24px py = ~104px; desktop logo 93px + 32px py = ~125px) */ #hero-content { padding: 144px 48px 48px; @@ -286,8 +293,8 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor