calum/rda-v3
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Fix mission blockquote overlapping donate button on mobile

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
Calum Muir 2026-06-12 10:33:27 +00:00
parent 62b845f1b5
commit bab33e0f65
1 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/pages/index.astro
View file

@ -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
<!-- Mission blockquote -->
<div
class="anim-fade-up2"
style="margin-top: auto; max-width: 500px; background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); border-radius: 7px; padding: 22px 26px;"
class="anim-fade-up2 hero-mission"
style="max-width: 500px; background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); border-radius: 7px; padding: 22px 26px;"
>
<div style="width: 32px; height: 3px; background: #7DA371; margin-bottom: 14px;" />
<blockquote style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: 16px; color: #F6F1E8; line-height: 1.6; margin: 0;">