/* Site-wide responsive fixes for the Drive / Unlayer page markup. build.py links this file last in on every page (with a ?v= content hash). */ /* Nothing inside the page content may widen the page. Slide-in image animations, Bootstrap form-row gutters and the homepage services grid made phones scroll sideways. `clip` (unlike `hidden`) creates no scroll container, so sticky/fixed elements keep working. */ .body { overflow-x: clip; } /* Footer: towns from the Google Business Profile service area, a fourth item in the address/hours row. */ .footer-service-area { margin: 0; align-self: center; max-width: 360px; font-size: 14px; line-height: 1.45; color: inherit; opacity: .85; } @media (max-width: 991px) { .footer-service-area { text-align: center; } } /* the row stacks and centres here */ @media (max-width: 767px) { /* Drive stacks multi-column rows only at <=480px, so large phones (481-767px) got two squeezed columns. Stack them up to 767px; rows marked "no-stack" (icon strips) are left alone. */ .body .u-row:not(.no-stack) { flex-wrap: wrap; } .body .u-row:not(.no-stack) > .u-col { flex: 0 0 100% !important; max-width: 100% !important; } /* Four-across rows read better as a 2x2 grid than as four full-width boxes (Drive centres these columns with auto side margins, which made each one fill a line). */ .body .u-row:not(.no-stack):has(> .u-col-25) { column-gap: 10px !important; } .body .u-row:not(.no-stack) > .u-col.u-col-25 { flex: 0 0 calc(50% - 5px) !important; max-width: calc(50% - 5px) !important; margin-left: 0 !important; margin-right: 0 !important; } /* Photos in image-only columns: once stacked they ran full width, so portrait shots (e.g. the homepage brake rotor) filled the screen. Cap the height, crop from the centre. */ .body .u-row:not(.no-stack) > .u-col:not(:has(p, h1, h2, h3, h4, li, form, input, textarea, button)) img { width: 100%; max-height: 360px; object-fit: cover; } /* Drive sets h1-h3 to 30px (some inline up to 36px) at every width; on phones long headings wrapped to 5-7 lines, worst inside the two-column sections. */ .d-wbr .body h1 { font-size: 26px !important; line-height: 1.25 !important; } .d-wbr .body h2 { font-size: 23px !important; line-height: 1.3 !important; } .d-wbr .body h3 { font-size: 20px !important; line-height: 1.3 !important; } .d-wbr .body :is(h1, h2, h3) [style*="font-size"] { font-size: inherit !important; } .d-wbr .body .home-hero .hero-copy h1 { font-size: 28px !important; line-height: 1.18 !important; } .d-wbr .body .d-progress-sidebar h2 { font-size: 20px !important; } /* job-application sidebar title is already small */ /* Homepage "Our Services" photo grid: its fixed 3-column template areas ran off the screen. */ .body .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: none !important; grid-auto-rows: auto !important; } .body .services-grid .grid-item { grid-area: auto !important; height: 190px !important; } /* Paired CTA buttons wrap instead of running off the edge. */ .body .home-sec2-btns { flex-wrap: wrap; } } @media (max-width: 480px) { .body .services-grid { grid-template-columns: minmax(0, 1fr) !important; } .body .services-grid .grid-item { height: 200px !important; } }