/** * AEO-REX Responsive Fixes * Created: 2025-01-14 * Purpose: Fix mobile responsiveness issues across all pages * * HOW TO USE: * Add this to the of each page AFTER the main stylesheet: * */ /* ============================================ BASE MOBILE-FIRST RESETS ============================================ */ /* Prevent horizontal scroll on all pages */ html, body { max-width: 100%; overflow-x: hidden; } /* Ensure all images are responsive */ img { max-width: 100%; height: auto; } /* Ensure all containers respect viewport */ .container, .content-section, .pricing-grid, .tools-grid, .faq-section, .hero-section { max-width: 100%; box-sizing: border-box; } /* ============================================ CHECKER WIDGET FIX (index.html) The circular checker widget breaks on mobile ============================================ */ .checker-widget { /* Remove fixed circle dimensions */ width: 100% !important; max-width: 780px !important; height: auto !important; min-height: auto !important; /* Change to rounded rectangle on mobile */ border-radius: 32px !important; /* Ensure padding scales */ padding: clamp(24px, 5vw, 100px) clamp(20px, 4vw, 80px) !important; /* Center content */ margin: 30px auto !important; } /* Checker widget content sizing */ .checker-widget h2, .checker-title { font-size: clamp(1.5rem, 4vw, 2.25rem) !important; } .checker-widget .subtitle, .checker-subtitle { font-size: clamp(1rem, 2.5vw, 1.3rem) !important; } .checker-widget input { font-size: clamp(1rem, 2vw, 1.15rem) !important; padding: clamp(14px, 3vw, 18px) clamp(16px, 3vw, 22px) !important; } .checker-widget button, .checker-widget .check-btn { font-size: clamp(1.1rem, 2.5vw, 1.35rem) !important; padding: clamp(14px, 3vw, 20px) clamp(20px, 4vw, 36px) !important; } /* ============================================ PRICING CARDS FIX ============================================ */ .pricing-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 20px !important; padding: 0 16px !important; } .pricing-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Remove scale on featured card for mobile */ @media (max-width: 768px) { .pricing-card.featured { transform: none !important; } } .pricing-price { font-size: clamp(2rem, 8vw, 3.5rem) !important; } .pricing-title { font-size: clamp(1.5rem, 4vw, 2.25rem) !important; } /* ============================================ NAVIGATION FIX ============================================ */ /* Ensure hamburger is visible on mobile */ @media (max-width: 768px) { .nav-links { display: none !important; } .hamburger { display: flex !important; } /* Make sure mobile menu works */ .mobile-menu.open { right: 0 !important; display: block !important; } } /* Nav brand text scaling */ .nav-brand, .logo-link { font-size: clamp(1.5rem, 4vw, 2rem) !important; } /* ============================================ HERO SECTION FIX ============================================ */ .hero-section, .hero { padding: clamp(32px, 6vw, 80px) clamp(16px, 4vw, 40px) !important; min-height: auto !important; } .hero-headline, .hero h1, h1 { font-size: clamp(1.75rem, 6vw, 4rem) !important; line-height: 1.2 !important; word-wrap: break-word !important; } .hero-subheadline, .hero-subhead, .hero p { font-size: clamp(1rem, 2.5vw, 1.5rem) !important; } /* ============================================ SECTIONS PADDING FIX Reduce excessive whitespace on mobile ============================================ */ section { padding-top: clamp(32px, 6vw, 80px) !important; padding-bottom: clamp(32px, 6vw, 80px) !important; padding-left: clamp(16px, 4vw, 40px) !important; padding-right: clamp(16px, 4vw, 40px) !important; } /* ============================================ TOOLS GRID FIX (tools.aeo-rex.com) ============================================ */ .tools-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 20px !important; } .tool-card { width: 100% !important; padding: clamp(24px, 4vw, 40px) clamp(20px, 3vw, 32px) !important; } .tool-title { font-size: clamp(1.25rem, 3vw, 2rem) !important; } .tool-desc { font-size: clamp(1rem, 2vw, 1.25rem) !important; } /* ============================================ FAQ SECTION FIX ============================================ */ .faq-section { padding: clamp(32px, 5vw, 60px) clamp(16px, 4vw, 40px) !important; } .faq-question { font-size: clamp(1rem, 2.5vw, 1.5rem) !important; padding: clamp(16px, 3vw, 24px) 0 !important; } .faq-answer, .faq-answer-inner { font-size: clamp(0.9rem, 2vw, 1.25rem) !important; } /* ============================================ FOOTER FIX ============================================ */ .footer-grid, .footer-content { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 24px !important; } @media (max-width: 480px) { .footer-grid, .footer-content { grid-template-columns: 1fr 1fr !important; } } /* ============================================ COMPARISON GRID FIX ============================================ */ .comparison-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 20px !important; } /* ============================================ ICON GRID FIX ============================================ */ .icon-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 20px !important; } .icon-box { padding: clamp(20px, 4vw, 32px) !important; } /* ============================================ FORM ELEMENTS FIX ============================================ */ input, textarea, select, button { font-size: 16px !important; /* Prevents iOS zoom on focus */ max-width: 100% !important; box-sizing: border-box !important; } /* Touch target minimum size */ button, a.btn-primary, a.pricing-cta, .tool-btn, .cta-button { min-height: 44px !important; min-width: 44px !important; } /* ============================================ FOMO BANNER FIX ============================================ */ .fomo-banner { font-size: clamp(12px, 2.5vw, 20px) !important; padding: clamp(10px, 2vw, 18px) 0 !important; } /* ============================================ STAT HIGHLIGHT FIX ============================================ */ .stat-number { font-size: clamp(2.5rem, 10vw, 4rem) !important; } .stat-label { font-size: clamp(1rem, 2.5vw, 1.25rem) !important; } /* ============================================ CTA SECTION FIX ============================================ */ .cta-section { padding: clamp(32px, 6vw, 60px) clamp(20px, 4vw, 40px) !important; } .cta-section h2 { font-size: clamp(1.5rem, 5vw, 3rem) !important; } .cta-button { padding: clamp(14px, 3vw, 20px) clamp(24px, 5vw, 48px) !important; font-size: clamp(1rem, 2.5vw, 1.25rem) !important; } /* ============================================ LIVE COUNTER FIX ============================================ */ .live-counter-inner { font-size: clamp(0.9rem, 2.5vw, 1.25rem) !important; padding: clamp(10px, 2vw, 14px) clamp(16px, 3vw, 28px) !important; flex-wrap: wrap !important; justify-content: center !important; text-align: center !important; } /* ============================================ PROCESS TIMELINE FIX ============================================ */ @media (max-width: 600px) { /* Stack timeline items vertically */ [style*="display: flex"][style*="gap: 24px"] { flex-direction: column !important; text-align: center !important; } /* Center the number circles */ [style*="min-width: 80px"] { margin: 0 auto 16px !important; min-width: 60px !important; height: 60px !important; font-size: 24px !important; } } /* ============================================ SPECIFIC BREAKPOINTS ============================================ */ /* Large phones */ @media (min-width: 480px) and (max-width: 767px) { .pricing-grid { grid-template-columns: 1fr !important; } } /* Tablets */ @media (min-width: 768px) and (max-width: 1023px) { .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; } .tools-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Desktop */ @media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; } } /* ============================================ PRINT STYLES ============================================ */ @media print { .fomo-banner, .hamburger, .mobile-menu, .mobile-overlay, .page-watermark { display: none !important; } body { padding-top: 0 !important; } }