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