✨ Enhancement: Improve mobile CTA button spacing in .cta-row for better touch targets #91
Description
Is your feature request related to a problem? Please describe
Current Behavior
On mobile devices (≤430px), the .cta-row class sets gap: 0rem, which removes all spacing between CTA buttons:
css
@media (max-width: 430px) {
.cta-row {
gap: 0rem;
}
}
This causes buttons to touch each other, making it harder to tap individual buttons accurately and reducing touch target size below recommended guidelines (44px per Apple HIG, 48px per Material Design).
Describe the solution you'd like
Expected Behavior
CTA buttons should maintain a minimal gap (e.g., 0.5rem or 8px) on mobile to ensure:
Touch-friendly spacing between buttons
Clear visual separation
Compliance with mobile accessibility standards
Describe alternatives you've considered
Proposed Fix
Update the mobile media query:
css
@media (max-width: 430px) {
.cta-row {
gap: 0.5rem; /* Instead of 0rem */
}
}
Or use a CSS custom property for consistency:
css
:root {
--cta-mobile-gap: 0.5rem;
}
@media (max-width: 430px) {
.cta-row {
gap: var(--cta-mobile-gap);
}
}
Additional context
Steps to Reproduce
Open the conference homepage on a mobile device or browser devtools (≤430px width)
View the CTA buttons section
Observe buttons touching with no gap between them
Are you working on this?
Yes