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

Hide hero donate button and scroll indicator on mobile/tablet

Browse source 
Both absolutely-positioned elements were overlapping on viewports
≤767px. Extended hide breakpoint from 640px to 767px for the scroll
indicator and applied same breakpoint to the donate button. The
JustGiving button remains accessible via the intro strip below.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Calum Muir 2026-04-30 19:47:41 +00:00
parent 6c0ac2d3e8
commit 22a54a8478
1 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/pages/index.astro
View file

@ -135,8 +135,9 @@ const ctaCards = [
text-transform: uppercase; text-transform: uppercase;
} }
@media (max-width: 640px) { @media (max-width: 767px) {
.scroll-indicator { display: none; } .scroll-indicator { display: none; }
.hero-donate { display: none; }
} }
</style> </style>
@ -194,12 +195,12 @@ const ctaCards = [
</div> </div>
</div> </div>
<!-- Donate button (absolute) --> <!-- Donate button (absolute, hidden on mobile) -->
<a <a
href="https://www.justgiving.com/charity/highlandgrouprda" href="https://www.justgiving.com/charity/highlandgrouprda"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
class="absolute" class="absolute hero-donate"
style="bottom: 40px; right: 28px;" style="bottom: 40px; right: 28px;"
> >
<img <img