/* ============================================================ JOYALTY PHOTOGRAPHY — responsive-fix.css Global mobile overflow and layout fixes. Add to ALL pages: index.html, services.html, portfolio.html, contact.html — inside AFTER all other CSS links. ============================================================ */ /* ── 1. Root: prevent horizontal overflow on every page ─────── */ html { overflow-x: hidden; scroll-behavior: smooth; } *, *::before, *::after { box-sizing: border-box; } body { overflow-x: hidden; max-width: 100vw; } /* ── 2. Images and media — never overflow their container ────── */ img, video, canvas, svg, iframe { max-width: 100%; height: auto; } /* ── 3. Containers — respect viewport width ─────────────────── */ .container, .container-fluid { max-width: 100%; padding-left: 16px; padding-right: 16px; } /* ── 4. Navbar ─────────────────────────────────────────────── */ @media (max-width: 768px) { .custom-nav .container { padding-left: 14px; padding-right: 14px; } .navbar-brand.logo { font-size: 1.1rem; } .navbar-brand.logo img, .navbar-brand.logo .block-img { height: 28px !important; width: auto !important; } /* Theme toggle — don't let it push content */ .theme-btn { margin-left: 8px !important; flex-shrink: 0; } } /* ── 5. Hero section ────────────────────────────────────────── */ @media (max-width: 768px) { .hero { min-height: 80svh; } .hero-content { padding: 0 16px; } .hero-title { font-size: clamp(1.6rem, 6vw, 2.8rem) !important; word-break: break-word; } .hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .hero-buttons .btn { width: auto; min-width: 130px; font-size: 0.88rem; padding: 10px 20px; } } /* ── 6. Gallery / portfolio grid ────────────────────────────── */ @media (max-width: 576px) { .gallery .row, .gallery-grid { margin: 0 !important; } .gallery .col-lg-4, .gallery .col-md-6 { padding: 0 4px !important; } .gallery img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; } } /* ── 7. Service cards ───────────────────────────────────────── */ @media (max-width: 768px) { .service-card { margin-bottom: 8px; } .service-card img { height: 180px !important; object-fit: cover; } .service-card ul { text-align: left; padding-left: 18px; } } /* ── 8. Reviews / swiper ────────────────────────────────────── */ @media (max-width: 576px) { .review-card { padding: 20px 14px; } .review-card img { width: 52px !important; height: 52px !important; } } /* ── 9. AI Chat widget ─────────────────────────────────────── */ @media (max-width: 480px) { .chat-container { right: 8px !important; left: 8px !important; width: auto !important; bottom: 80px !important; max-height: 72svh !important; } .chat-toggle { bottom: 16px !important; right: 16px !important; } } /* ── 10. Booking form (services.html) ──────────────────────── */ @media (max-width: 768px) { .booking-progress { padding: 16px !important; } .progress-wrapper { overflow-x: auto; padding-bottom: 8px; } .form-step h4 { font-size: 1rem; } .form-step .row { margin: 0; } .form-step .col-md-6, .form-step .col-md-12 { padding: 0 4px; } #mpesaPayBtn { font-size: 0.88rem; padding: 12px; } /* Success / receipt screens */ .success-screen, .receipt-section { padding: 16px !important; } .receipt-box, .success-box { padding: 20px 14px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } } /* ── 11. Receipt card in booking flow ───────────────────────── */ @media (max-width: 576px) { .rc-refs { flex-direction: column; gap: 4px; } .rc-grid .rc-row { flex-direction: column; gap: 1px; } .rc-row span { font-size: 0.72rem; } } /* ── 12. Contact page ───────────────────────────────────────── */ @media (max-width: 768px) { .contact-form-wrap, .contact-info-wrap { padding: 16px !important; } } /* ── 13. Portfolio page ─────────────────────────────────────── */ @media (max-width: 576px) { .portfolio-grid, .portfolio-masonry { columns: 1 !important; column-gap: 0 !important; } .portfolio-item { break-inside: avoid; margin-bottom: 8px; } } /* ── 14. Footer ─────────────────────────────────────────────── */ @media (max-width: 768px) { .footer .row { gap: 24px 0; } .footer-brand { justify-content: center; } .footer .col-lg-4, .footer .col-lg-2, .footer .col-lg-3 { text-align: center; } .footer-links { padding: 0; list-style: none; } .footer-social { justify-content: center !important; } .footer-newsletter-form { flex-direction: column; gap: 10px; } .footer-newsletter-form input, .footer-newsletter-form button { width: 100% !important; } } /* ── 15. Tables — allow horizontal scroll ───────────────────── */ @media (max-width: 768px) { .table-responsive-sm { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ── 16. Sections — safe padding on small screens ───────────── */ @media (max-width: 576px) { section, .section-pad { padding-left: 12px !important; padding-right: 12px !important; } .section-title { font-size: clamp(1.3rem, 5vw, 2rem) !important; word-break: break-word; } } /* ── 17. Buttons — don't overflow ───────────────────────────── */ @media (max-width: 400px) { .btn, .primary-btn, .outline-btn, .section-btn { font-size: 0.82rem !important; padding: 9px 16px !important; white-space: nowrap; } } /* ── 18. Wave SVGs — no overflow ────────────────────────────── */ .wave-container { overflow: hidden; width: 100%; }