/* ═══════════════════════════════════════════════════════════════════════ v2-mobile.css — one responsive layer, every portal. WHY THIS EXISTS The portals were built desktop-first and had mobile bolted on later, page by page, by different passes. The business portal has three media queries; the affiliate portal has its own; the screening page had none until this week. So every page is broken in a slightly different way and every fix only helps one page. This is the shared layer. Link it LAST — after the page's own styles — on every portal, and it corrects the patterns they all share. ADDING IT One line in , after every other stylesheet: WHAT IT DELIBERATELY DOESN'T DO It doesn't restyle anything. No colours, no fonts, no spacing changes on desktop. Everything below sits inside a media query and only fixes things that are broken at phone width. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · nothing may exceed the screen ─────────────────────────────── One wide element — a table, a long URL, a fixed-width card — makes the entire page scroll sideways, and every centred thing then looks off-centre. This is the single most common cause of "wonky". */ @media (max-width: 820px) { html, body { max-width: 100%; overflow-x: hidden; } /* Images and media never push the layout wider than the phone. */ img, video, iframe, canvas, svg { max-width: 100%; height: auto; } /* Long unbroken strings — emails, referral links, URLs — wrap instead of stretching their container. */ body { overflow-wrap: break-word; } /* Tables can't wrap, so let them scroll inside their own box rather than dragging the page with them. */ table { display: block; width: 100%; overflow-x: auto; } } /* ── 2 · the phone layout ────────────────────────────────────────────── */ @media (max-width: 640px) { /* 16px is the threshold. Below it, iOS Safari zooms the whole page the moment a field is focused — and once zoomed, everything reads as misaligned. This one rule fixes more "off centre" reports than any other. */ input, select, textarea, .fi, .fi input, .fi select, .fi textarea, .field input, .field select, .field textarea { font-size: 16px !important; max-width: 100%; } /* Two- and three-up form rows collapse. Written to catch inline styles as well as classes, because these pages use both. */ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns:repeat(3"], .field-row, .g2, .g3, .g4, .row-2, .two-up { grid-template-columns: 1fr !important; } /* Anything laid out in a row wraps rather than squeezing. */ .actions, .btn-row, .toolbar, .filters, .chips, .tabs { flex-wrap: wrap !important; } /* Touch targets. Apple's own guidance is 44px; a 30px pill is a button you miss twice before hitting. */ button, .btn, [role="button"], .chip, .tab, .val-opt, .howto-opt { min-height: 44px; } /* A button sitting alone in a row goes full width — easier to hit and it stops odd half-width buttons floating mid-screen. */ .submit-btn, .btn-block, .btn-wide { width: 100% !important; } /* Cards and panels lose their desktop padding, which on a 390px screen can eat a quarter of the width. */ .card, .panel, .form-card, .wizard-box, .modal, .sheet { padding: 20px 16px !important; border-radius: 8px !important; } /* Modals and overlays fill the screen instead of floating in a box that's wider than the phone. */ .wizard-ov, .modal-bg, .overlay { padding: 12px !important; } .wizard-box, .modal { max-width: 100% !important; width: 100% !important; } /* Headings scale down. A 52px display font at 390px wide breaks words across lines in ways that look like a layout fault. */ h1 { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.1; } h2 { font-size: clamp(20px, 5.5vw, 27px) !important; line-height: 1.15; } /* Fixed sidebars must not hold space. Where a page slides its own sidebar this is harmless; where a page forgot, this rescues it. */ .sb, .sidebar, aside.nav { position: fixed !important; z-index: 60; } .main, .content-wrap, main { margin-left: 0 !important; width: 100% !important; } /* Room at the bottom so the last button isn't jammed against the browser chrome or hidden behind a home indicator. */ .content, .main, main { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; } } /* ── 3 · very small phones ──────────────────────────────────────────── */ @media (max-width: 400px) { .val-opt, .howto-opt, .chip { flex: 1 1 100% !important; } .type-grid, .tier-grid, .grid { grid-template-columns: 1fr !important; } .card, .panel, .form-card { padding: 16px 13px !important; } } /* ── 4 · landscape on a phone ───────────────────────────────────────── */ /* Short viewport, so tall fixed headers eat the whole screen. */ @media (max-height: 480px) and (orientation: landscape) { header, .topbar { position: static !important; } .wizard-ov, .modal-bg { align-items: flex-start !important; } } /* ── 5 · things that aren't phone-specific but bite hardest there ───── */ /* Safari on iOS needs this or a select renders as a grey system blob that ignores every style around it. */ select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } /* Prevents the "sticky hover" state on touch, where a button stays lit after you tap it because the device never fires mouseout. */ @media (hover: none) { a:hover, button:hover, .btn:hover, .card:hover { transform: none !important; } }