/* ============================================================ SERVICE DETAILS PAGE — RESPONSIVE FIX (Final) PROBLEM FOUND in your style.css: @media (max-width: 1299px) { .features-wrapper { display: block } } This makes image & text stack on ALL screens below 1299px. This file OVERRIDES that correctly. HOW TO USE: Add AFTER your main style.css in : ============================================================ */ /* ───────────────────────────────────────────────────────── 1. DESKTOP & LARGE SCREENS (1300px+) Already works fine — no change needed ───────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────── 2. TABLET + MEDIUM SCREENS (768px – 1299px) Theme breaks here with display:block FIX: keep side-by-side layout ───────────────────────────────────────────────────────── */ @media (max-width: 1299px) { .features-wrapper { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 30px !important; flex-wrap: nowrap !important; } .features-wrapper .features-content { flex: 0 0 52% !important; max-width: 52% !important; min-width: 0 !important; word-break: break-word !important; overflow-wrap: break-word !important; } .features-wrapper .features-img { flex: 0 0 44% !important; max-width: 44% !important; min-width: 0 !important; /* override theme's min-width:300px */ margin-top: 0 !important; /* override theme's margin-top:20px */ } .features-wrapper .features-img img { width: 100% !important; height: auto !important; /* override inline height="887" */ display: block !important; object-fit: cover !important; } } /* ───────────────────────────────────────────────────────── 3. MOBILE (max 767px) Stack vertically: checklist first, image below ───────────────────────────────────────────────────────── */ @media (max-width: 767px) { .features-wrapper { display: flex !important; flex-direction: column !important; gap: 20px !important; } .features-wrapper .features-content { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } .features-wrapper .features-img { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; min-width: 0 !important; margin-top: 0 !important; } .features-wrapper .features-img img { width: 100% !important; height: auto !important; max-width: 100% !important; } /* Prevent text from overflowing on very small screens */ .features-content, .checklist.style3, .checklist.style3 li, .checklist.style3 p { word-break: break-word !important; overflow-wrap: break-word !important; max-width: 100% !important; } } /* ───────────────────────────────────────────────────────── 4. SMALL MOBILE (max 480px) Extra breathing room ───────────────────────────────────────────────────────── */ @media (max-width: 480px) { .features-wrapper { gap: 16px !important; margin-bottom: 32px !important; } .page-content h3 { font-size: 1.3rem; } .page-content h4 { font-size: 1.1rem; } }