/* ========================================================================== GTD Desco — guards.css Last stylesheet in. It holds no design: every rule here is a floor that keeps a mistake somewhere else from becoming a broken page. ========================================================================== */ /* ── no horizontal scroll, ever ──────────────────────────────────────────── * * The page was scrolling sideways on iOS with a band of empty white down the * right, while Chrome at the same widths measured the document at exactly the * viewport — 360, 375, 390, 393, 414, 430, all clean, and still clean with the * clipping forced off. That disagreement is the whole story. * * The only thing holding the page together was `overflow-x: hidden` on . * When is `visible`, that value is not applied to the body box at all: * it is PROPAGATED to the viewport, and the body's own computed value becomes * `visible`. Chrome's propagation clips. Safari's is a long-standing weak spot * — the classic "overflow-x: hidden on body does nothing on iOS" — so whatever * overflowed escaped on the phone and nowhere else. Put the clip on * itself and there is nothing left to propagate. * * `clip`, not `hidden`. `hidden` would make the root a scroll container: * position: sticky would stop sticking to the viewport, the scroll-driven * entrances would lose their timeline, and the page could still be panned to * whatever overflowed. `clip` creates no scroll container at all, and because * `clip` is compatible with `visible` the vertical axis stays genuinely * visible rather than computing to `auto`. * * The `hidden` line in front of it is the fallback for engines that do not * know `clip`: they keep the declaration they understand and are no worse off * than they were. * * This hides the symptom by design — it cannot fix a block that is laid out * too wide, it only stops that block dragging the whole page sideways. Add * ?gtd-overflow=1 to any URL to have the page name the offender. * ------------------------------------------------------------------------ */ html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; } /* ── third-party furniture ──────────────────────────────────────────────── * The WhatsApp widget lays its container out at a fixed 430px, which is wider * than every iPhone in portrait; it is position: fixed so it cannot scroll the * document, but it should not be hanging off the edge either. * ------------------------------------------------------------------------ */ .qlwapp__container { max-width: 100vw; } /* ── media never exceeds its box ────────────────────────────────────────── * The theme's global img rule is defeated in several places by an explicit * `max-width: none` (which the photographs inside cropped frames genuinely * need). Everything else stays contained. * ------------------------------------------------------------------------ */ img:not([class*="gtd-"]):not([class*="rl-"]), video, canvas, svg:not([class*="icon"]) { max-width: 100%; }