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

Fix CTA cards on mobile: touch triggers :hover which overrides flex:none causing layout shift

Browse source 
On touchscreens, tapping a card fires :hover which changed flex from none to 1.3,
expanding the card mid-tap and shifting subsequent cards up — so the touch-up
registered on the wrong card. Fix: flex: none !important + transition: none on mobile.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Calum Muir 2026-06-12 10:37:54 +00:00
parent 4a93c7efca
commit e9c0904bee
1 changed files with 2 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/pages/index.astro
View file

@ -118,7 +118,8 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor
@media (max-width: 767px) {
.cta-editorial { flex-direction: column; height: auto; overflow: visible; }
.cta-card { flex: none; height: 280px; }
.cta-card { flex: none !important; height: 280px; transition: none; }
.cta-card:hover .cta-card-img { transform: none; }
.cta-sub { opacity: 1 !important; }
.cta-more { opacity: 1 !important; }
}