/* ============================================================================= Public (guest) pages — responsive hardening Phase 711 ----------------------------------------------------------------------------- ADDITIVE ONLY, AND DESKTOP-NEUTRAL BY DESIGN. These pages run on the Sigma theme, whose markup and look are not ours to restyle: the brief was to make the public site fully responsive WITHOUT changing the layout, design or theme. So this file never sets a colour, a font or a spacing that shows at desktop width. It fixes the things that make a page scroll sideways on a phone, which is what "not responsive" actually means here. WHY NOT `body { overflow-x: hidden }`. That is the usual one-line "fix" and it is the wrong one: it does not stop the overflow, it just clips it, so content still sits off-screen and can no longer be reached. Every rule below removes an actual cause instead. SCOPE. Everything is keyed on `.guest-rs`, a class added to the guest layout's for exactly this purpose. Bare element selectors were the alternative and are not safe here: this stylesheet loads alongside the theme's own sliders and carousels, and an unscoped `img { max-width: 100% }` is a well-known way to collapse those. The class also makes it obvious, from the markup, that the hardening applies to this layout and no other. ============================================================================= */ /* ── 1. Wide tables scroll THEMSELVES, not the page ────────────────────────── Both public tables (Pincode Locator, Delivery Destination) are the theme's `.table100`, which sets no overflow at all. A table wider than a phone therefore dragged the WHOLE page sideways — the header, the hero and the footer with it. Confining the scroll to the table keeps the rest of the page still. */ .table100 { overflow-x: auto; -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */ max-width: 100%; } /* ── 2. Media can never exceed its column ────────────────────────────────── The single most common overflow source on a themed page: an image or embed carrying intrinsic pixel dimensions from the design it was cut for. */ .guest-rs img, .guest-rs video, .guest-rs iframe, .guest-rs embed, .guest-rs object { max-width: 100%; } .guest-rs img, .guest-rs video { height: auto; /* keep the aspect ratio once the width is capped */ } /* An iframe (map, video embed) has no intrinsic ratio to fall back on, so it keeps whatever height it was given and only its width is constrained. */ /* SVG IS DELIBERATELY EXCLUDED FROM BOTH RULES ABOVE. It was in them, and it broke the Sign In button. An inline icon is sized by a utility class — Tailwind's `.h-5`/`.w-5` here — at specificity (0,1,0). `.guest-rs svg` is (0,1,1) and therefore WINS, so `height:auto` beat `.h-5`. With no intrinsic height to fall back on, the icon resolved to 150px tall (measured), which stretched the submit button to 168px and pushed its label onto a second line. The rules exist to stop a photo cut at 1600px from overflowing its column. An icon is not that: it is already small, already explicitly sized, and has no intrinsic dimensions for `height:auto` to preserve. Anything genuinely oversized here is a layout bug at the point of use, not something to paper over globally. If a specific decorative SVG ever does need capping, cap that one — do not put this selector back. */ /* ── 3. Unbreakable strings ──────────────────────────────────────────────── Tracking numbers, AWB ids, long URLs and e-mail addresses are single "words" with no space to wrap at, so they push their container wider than the screen. overflow-wrap breaks them ONLY when they would otherwise overflow — ordinary prose is completely unaffected, which is why this is safe to apply broadly. */ .guest-rs p, .guest-rs li, .guest-rs td, .guest-rs th, .guest-rs dd, .guest-rs .sigma_post-single-content { overflow-wrap: break-word; word-wrap: break-word; } /* ── 4. Preformatted blocks scroll instead of stretching ──────────────────── */ .guest-rs pre, .guest-rs code { max-width: 100%; overflow-x: auto; } /* ── 5. Below the phone breakpoint only ────────────────────────────────────── Everything in this query is invisible at desktop width by construction, so it cannot affect the design the brief protects. The theme sizes several display headings in fixed px for a 1920px comp; on a 360px screen those set a minimum line length wider than the viewport. Capping with clamp() keeps the theme's own value as the upper bound — the desktop size is unchanged — and only shrinks below it. */ @media (max-width: 575.98px) { .guest-rs h1 { font-size: clamp(1.75rem, 7vw, 2.6rem); } .guest-rs h2 { font-size: clamp(1.45rem, 6vw, 2.1rem); } .guest-rs h3 { font-size: clamp(1.2rem, 5vw, 1.6rem); } /* A row of buttons laid out inline overflows once the labels are long. Let the group wrap rather than run off the edge. */ .guest-rs .sigma_btn-group, .guest-rs .btn-group-responsive { display: flex; flex-wrap: wrap; gap: .5rem; } /* The theme's section padding is generous for a desktop comp and eats a third of a phone screen before any content appears. */ .guest-rs .section, .guest-rs .section-padding { padding-top: 3rem; padding-bottom: 3rem; } }