/* ========================================================= Painting GTA – Mobile Responsive Fix Add this AFTER painting_style.css in File: painting_mobile_fix.css ========================================================= */ /* ── GLOBAL ── */ *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; height: auto; } /* ========================================================= BREAKPOINT: tablet and below (≤ 1024px) ========================================================= */ @media (max-width: 1024px) { /* Header: hide desktop nav, show hamburger */ nav.desktop-nav { display: none !important; } .header-phone { display: none !important; } .mobile-menu-btn { display: inline-flex !important; } /* Hero: single column */ .hero-content { grid-template-columns: 1fr !important; gap: 2.5rem !important; padding: 7rem 1.5rem 4rem !important; } /* Footer grid: 2 columns */ .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; } } /* ========================================================= BREAKPOINT: mobile (≤ 768px) ========================================================= */ @media (max-width: 768px) { /* ── Header ── */ .header-inner { padding: 0 1rem !important; height: 64px !important; } .logo img { height: 52px !important; } /* "Free Quote" header button: hide on very small screens to save space */ .header-right .btn-primary { display: none !important; } .mobile-menu-btn { display: inline-flex !important; } /* Mobile nav font size */ .mobile-nav a { font-size: 15px !important; padding: 13px 16px !important; } /* ── Hero ── */ .hero { min-height: auto !important; } .hero-content { grid-template-columns: 1fr !important; gap: 2rem !important; padding: 6rem 1rem 3rem !important; text-align: left; } .hero h1 { font-size: clamp(1.75rem, 7vw, 2.4rem) !important; } .hero p { font-size: 1rem !important; } .hero-ctas { flex-direction: column !important; gap: 10px !important; } .hero-ctas a { width: 100% !important; justify-content: center !important; text-align: center !important; } .hero-stats { gap: 1.25rem !important; margin-top: 2rem !important; } .hero-stat .num { font-size: 1.6rem !important; } /* Hero quote card: full width, no overflow */ .hero-card { width: 100% !important; padding: 1.5rem !important; border-radius: 16px !important; } /* ── Trust Bar ── */ .trust-bar { padding: 0.75rem 1rem !important; } .trust-bar-inner { gap: 0.75rem 1.5rem !important; justify-content: flex-start !important; } .trust-item { font-size: 12px !important; gap: 6px !important; } /* ── Services section ── */ #services .container { padding-left: 1rem !important; padding-right: 1rem !important; } #services .grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; } #services h2 { font-size: 1.75rem !important; } /* ── Gallery ── */ #gallery .container { padding-left: 1rem !important; padding-right: 1rem !important; } #gallery .grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; } #gallery h2 { font-size: 1.75rem !important; } /* Fix hardcoded image widths in gallery */ #gallery img { width: 100% !important; height: 220px !important; } /* ── Contact / Quote section ── */ #contact .container { padding-left: 1rem !important; padding-right: 1rem !important; } #contact .grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; } #contact h2 { font-size: 1.75rem !important; } /* Van image inside contact form: full width */ #contact img { width: 100% !important; height: auto !important; } /* GTA cities grid: 2 columns on mobile */ #contact .grid-cols-2 { grid-template-columns: 1fr 1fr !important; } /* ── Testimonials ── */ .section { padding: 3.5rem 1rem !important; } .testimonials-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; } .section-title { font-size: clamp(1.5rem, 5vw, 2rem) !important; } /* ── FAQ ── */ .faq-list { padding: 0 !important; } .faq-q { padding: 1rem 1.25rem !important; } .faq-a { padding: 0 1.25rem 1rem !important; } /* ── Footer ── */ footer { padding: 3rem 1rem 1.5rem !important; } .footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } .footer-brand img { height: 56px !important; } .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; text-align: left !important; } .footer-bottom-links { gap: 1rem !important; } /* ── Tailwind grid overrides (used in services / gallery / contact) ── */ .md\:grid-cols-2, .lg\:grid-cols-2, .lg\:grid-cols-3, .lg\:grid-cols-4, .md\:grid-cols-3 { grid-template-columns: 1fr !important; } } /* ========================================================= BREAKPOINT: very small phones (≤ 380px) ========================================================= */ @media (max-width: 380px) { .hero h1 { font-size: 1.6rem !important; } .hero-stat .num { font-size: 1.4rem !important; } /* Cities: single column on tiny screens */ #contact .grid-cols-2 { grid-template-columns: 1fr !important; } .trust-bar-inner { flex-direction: column !important; align-items: flex-start !important; } }