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 */