/* * ================================================================ * KAR.ONE — DESIGN FIXES PATCH v1.1 * File: kar-one-fixes.css * * HOW TO APPLY: * Add this line in every page's , AFTER style.css: * * * * OR copy-paste the entire contents at the very bottom of * /css/style.css * * Fixes included: * 1. Gap between navbar and product-icon row * 2. Slick slider rogue margin-bottom * 3. Tablet layout: desktop ↔ mobile section swap (991 px) * 4. Responsive banner slider & layout (≤ 767 px) * 5. Small-phone polish (≤ 430 px) * 6. Mobile header: cart badge overlapping logo (Pixel 7 etc.) * ================================================================ */ /* ================================================================ FIX 1 — Gap between navbar and product-icon row ---------------------------------------------------------------- Cause : section.service-list carries class "mt-30" which resolves to a computed margin-top of 55 px. Fix : Override to 10 px so the icons sit just below the header. ================================================================ */ section.service-list { margin-top: 10px !important; margin-bottom: 20px !important; } /* ================================================================ FIX 2 — Slick slider: remove rogue margin-bottom on every slide ---------------------------------------------------------------- Cause : ".slick-initialized .slick-slide { margin-bottom: 8px }" in style.css adds an 8 px gap to every slider on the page (product icons, banner, offers, reviews). Fix : Reset to 0. ================================================================ */ .slick-initialized .slick-slide { margin-bottom: 0 !important; } /* ================================================================ FIX 3 — Tablet + desktop-below breakpoint (≤ 991 px) ---------------------------------------------------------------- Bootstrap's "col-md-*" columns start stacking here. We also swap the desktop-only sections for their mobile equivalents, which the developer built but never activated with a media query. ================================================================ */ @media screen and (max-width: 991px) { /* ── Annual Maintenance / Pre-Purchase / Mobile Mechanic ────── Three pairs of sections exist: .desktop-annual-service — side-by-side image + text layout .mobile-annual-service — stacked mobile layout The mobile ones are permanently hidden in style.css; reveal them here and hide the desktop versions. ────────────────────────────────────────────────────────────── */ .desktop-annual-service { display: none !important; } .mobile-annual-service { display: block !important; } /* ── How it Works: vertical timeline ───────────────────────── .timeline-hori — horizontal, desktop .timeline-vertical — vertical, mobile (hidden in style.css) ────────────────────────────────────────────────────────────── */ .timeline-hori { display: none !important; } .timeline-vertical { display: block !important; } /* ── Popular Services / Limited Time Offers ────────────────── Inside .popular-service, elements carry either class "desktop" or "mobile". The mobile ones are hidden in style.css; swap them here. ────────────────────────────────────────────────────────────── */ .popular-service h2.desktop, .popular-service .desktop { display: none !important; } .popular-service h2.mobile, .popular-service .mobile { display: block !important; } /* ── Fix elements with hard-coded pixel widths ─────────────── .we-serve p { width: 535px } .about-footer { width: 400px } Both overflow on narrower viewports. ────────────────────────────────────────────────────────────── */ .we-serve p { width: 100% !important; } .about-footer { width: 100% !important; } /* Footer email link: reduce left margin so it doesn't overflow */ footer .fo-email { margin-left: 10px; } } /* ================================================================ FIX 4 — Phone / tablet responsive (≤ 767 px) ---------------------------------------------------------------- Bootstrap's col-md-* columns become 100 % wide below 768 px, stacking the banner (col-md-7) above the car-brand form (col-md-5). These rules size everything correctly once stacked. ================================================================ */ @media screen and (max-width: 767px) { /* ── Main banner slider (.slick2) ───────────────────────────── At full desktop width (~1800 px) the banner images render at ~585 px tall. Stacked on a phone they would scale down to ~120 px, which is too short. Set a comfortable minimum height. ────────────────────────────────────────────────────────────── */ .slick2 .slick-slide img, .slick2 .banner img { min-height: 220px; object-fit: cover; object-position: center; } /* ── Banner overlay text ──────────────────────────────────── */ .banner-text h1 { font-size: 28px; line-height: 36px; } .banner-text { padding: 0 20px 22px 22px; } /* ── Car-brand selector (right column, now below banner) ───── Give it a little breathing room after the stacked banner. ────────────────────────────────────────────────────────────── */ .select-brand { margin-top: 15px; } /* Reduce fixed height of scrollable brand grid */ .radio-buttons { height: 260px; } /* ── Product-icon row (.slick1) ────────────────────────────── Hide the vertical separator between icons so they don't crowd on a narrow screen. ────────────────────────────────────────────────────────────── */ .seprator { display: none; } /* Scale down service icon labels */ .service-name h5 { font-size: 0.85rem; } /* ── "We Serve" section CTA buttons ────────────────────────── Allow the two buttons to wrap onto separate lines. ────────────────────────────────────────────────────────────── */ .we-serve .flex-btn { flex-wrap: wrap; gap: 10px; } .we-serve .flex-btn .btn-outline { margin-left: 0; } /* ── Footer ────────────────────────────────────────────────── Allow footer button row to wrap. ────────────────────────────────────────────────────────────── */ footer .flex-btn { flex-wrap: wrap; gap: 10px; } } /* ================================================================ FIX 5 — Small phones (≤ 430 px) ---------------------------------------------------------------- Extends / overrides the existing @media (max-width: 430px) block already present in style.css. ================================================================ */ @media screen and (max-width: 430px) { /* ── Banner ───────────────────────────────────────────────── */ .slick2 .slick-slide img, .slick2 .banner img { min-height: 180px; } .banner-text h1 { font-size: 22px; line-height: 28px; } .banner-text { padding: 0 12px 16px 12px; } /* ── Slick slide margins: tighter on a narrow screen ─────── */ .slick-slide { margin: 0 5px !important; } .slick-list { margin: 0 -5px !important; } /* ── Car brand cards: slightly narrower ──────────────────── */ .radio-btn { width: 110px; height: 100px; } .radio-buttons { height: 240px; } /* ── Footer: stack everything vertically ─────────────────── */ footer .flex-btn { flex-direction: column; align-items: flex-start; gap: 10px; } footer .border-btn { width: 100%; max-width: 280px; } /* ── WhatsApp newsletter widget in footer ────────────────── */ .white-chit .whatsapp { flex-direction: column; align-items: stretch; gap: 10px; } .whatsapp input { margin-right: 0 !important; margin-bottom: 0; } .whatsapp button { width: 100% !important; } } /* ================================================================ FIX 6 — Mobile header: cart badge overlapping the logo ---------------------------------------------------------------- Cause : The wsmenu plugin stylesheet gives sup.phhead "position: relative; top: -40px". In the mobile header the badge sits AFTER the cart icon in the DOM flow, so -40px pulls it up into the logo area. Mobile header DOM order: [hamburger] [logo .smllogo] [search] [cart .ph_cart] [sup.phhead] Fix : Override position to absolute, anchored to the .wsmobileheader container, so it sits on top of the cart bag icon in the top-right corner. ================================================================ */ .wsmobileheader { position: relative !important; } .wsmobileheader sup.phhead { position: absolute !important; top: 6px !important; right: 8px !important; left: auto !important; background-color: #fff; color: #E2000F; border: 1px solid #E2000F; border-radius: 50%; padding: 1px 5px; font-size: 10px; font-weight: 700; line-height: 1.4; min-width: 16px; text-align: center; z-index: 10; }