From 84c5998eebf6a54946fc6c2df64ae5bc6e6db311 Mon Sep 17 00:00:00 2001 From: Scott Scoble Date: Wed, 13 May 2026 21:58:36 -0700 Subject: [PATCH] fix: mobile responsiveness audit (brand-site#65) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Expanded touch target list: nav-mobile-link, nav-mobile-cta, nav-cta, footer-social a, btn, form-submit, newsletter-form button, nav-menu-toggle - Footer social icons: 20px → 24px SVG, 44px tap targets with border-radius - Form select/input: 48px min-height on coarse pointers, 16px font prevents zoom - Newsletter form: stacks vertically on mobile (flex-direction: column) - Card grids: explicit 1fr on small screens (was implicit but not guaranteed) - Hero subtitle/actions: overflow-wrap: break-word prevents horizontal scroll - Nav toggle: increased padding to 0.75rem for easier tapping --- src/components/Footer.astro | 6 ++-- src/styles/global.css | 72 ++++++++++++++++++++++++++++++++++++- 2 files changed, 74 insertions(+), 4 deletions(-) diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 188cb8a..0ec8b12 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -13,13 +13,13 @@ const currentYear = new Date().getFullYear();
- + - + - +
diff --git a/src/styles/global.css b/src/styles/global.css index 8c966f7..732b317 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -470,6 +470,37 @@ code { .container { padding: 0 var(--space-md); } + + /* Prevent horizontal overflow on mobile */ + .hero .hero-subtitle, + .hero .hero-actions, + .page-header p { + overflow-wrap: break-word; + word-break: break-word; + } + + /* Ensure card grids go single column on small screens */ + .card-grid { + grid-template-columns: 1fr; + } + + /* Ensure form inputs don't cause horizontal scroll */ + .form-group input, + .form-group select, + .form-group textarea { + max-width: 100%; + box-sizing: border-box; + } + + /* Newsletter form stacks on mobile */ + .newsletter-form { + flex-direction: column; + gap: 0.5rem; + } + + .newsletter-form button { + width: 100%; + } } @media (min-width: 640px) and (max-width: 1023px) { @@ -481,17 +512,56 @@ code { /* Mobile touch targets (44px minimum) - Issue #65 */ @media (pointer: coarse) { .nav-links a, + .nav-mobile-link, + .nav-mobile-cta, + .nav-cta, .footer-links a, + .footer-social a, .book-link, .talk-link, .btn-primary, - .btn-outline { + .btn-outline, + .btn, + .form-submit, + .newsletter-form button, + .nav-menu-toggle { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } + + /* Make nav menu toggle easier to tap */ + .nav-menu-toggle { + padding: 0.75rem; + } + + /* Ensure footer social icons have adequate tap area */ + .footer-social a { + width: 44px; + height: 44px; + border-radius: 50%; + } + + /* Ensure select dropdowns are tappable on mobile */ + .form-group select { + min-height: 48px; + font-size: 1rem; + padding: 0.75rem; + } + + /* Ensure newsletter input and button are tappable */ + .newsletter-form input { + min-height: 48px; + font-size: 1rem; + } + + .newsletter-form button { + min-height: 48px; + min-width: 80px; + padding: 0.75rem 1.25rem; + } } /* Reduced motion - Issue #53 accessibility */