directly under , so there is no semantic hook to target — the rule has to apply from down, with explicit exemptions for the elements that are supposed to overflow. `max-width` is a different property from `width`, so it constrains an inline width with no specificity fight and no !important. One declaration caps every hardcoded width, present and future, instead of chasing individual values. Scoped to <=1400px so the desktop composition at 1440/1600/ 1920 is untouched. ============================================================ */ @media (max-width: 1400px) { body * { max-width: 100%; } /* Children of a deliberately horizontal-scrolling row must keep their intrinsic size, or the row has nothing to scroll. */ #accred-strip > div:last-child > div, #accred-strip > div:last-child img { max-width: none; } /* Inline max-width:NNNpx outranks a stylesheet max-width, so the values actually present in the markup need an override. */ [style*="max-width: 1920px"], [style*="max-width: 1440px"], [style*="max-width: 1280px"], [style*="max-width: 900px"], [style*="max-width: 800px"], [style*="max-width: 780px"], [style*="max-width: 760px"], [style*="max-width: 696px"], [style*="max-width: 640px"], [style*="max-width: 600px"] { max-width: 100% !important; } /* Long unbroken strings (URLs, document codes) must not be able to set a min-content width wider than the viewport. */ p, span, h1, h2, h3, h4, a, li, td, th, div { overflow-wrap: break-word; word-break: normal; hyphens: none; } /* Figma exports mark text spans white-space:pre-wrap, preserving the source file's hard-wrapped lines. Those were authored on a 1440px canvas and refuse to reflow on anything narrower. */ span.text { white-space: normal; } /* Rows of cards/columns exported as non-wrapping flex run off the edge once the viewport is narrower than their min-content width. Wrapping is the reflow the layout was missing. The nav is excluded: it has its own drawer behaviour in section 2a. */ div[style*="flex-direction: row"]:not([style*="flex-wrap"]):not(#accred-strip):not(#site-nav div) { flex-wrap: wrap; /* Turning a single-line flex row into a multi-line one activates align-content, which defaults to `stretch`. Any leftover height is then distributed across the wrapped lines, inflating each card with dead space — the course cards rendered ~180px of content inside a 900px box. Packing the lines to the start keeps every card the height of its own content. */ align-content: flex-start; } /* The homepage "Campus Life" gallery pairs images two at a time inside its own nested row (gate photo + a 2x2 block of smaller shots). Those inner rows only declare grid-column-gap (for the side-by-side gap) and rely on the outer column's row-gap for spacing between pairs. The generic wrap rule above forces each pair to stack, but a stacked pair has no row-gap of its own, so the two images inside it end up touching while the gap between pairs (inherited from the outer column) still shows. Giving these rows their own row-gap fixes the touching pair without changing the already-correct gap between pairs. */ div[style*="display: flex;flex-direction: row;grid-column-gap: 20px;position: relative;flex-shrink: 0;"] { row-gap: 20px; } } /* ------------------------------------------------------------ 7b. ACCREDITATION STRIP — 900px to 1400px band Section 2b stacks the strip below 900px and section 1 shrinks gutters below 1200px, but between 900 and 1400 it stayed a single non-wrapping row: contact block + six badges, combined min-content ~1127px. At 1024px it pushed 103px past the edge on every page carrying the strip. ------------------------------------------------------------ */ @media (min-width: 901px) and (max-width: 1400px) { #accred-strip { flex-wrap: wrap !important; row-gap: 8px !important; justify-content: center !important; } #accred-strip > div:last-child { flex-wrap: wrap !important; justify-content: center !important; } } /* ============================================================ 7c. GRID TRACK BLOW-OUT — ALL PAGES, ALL WIDTHS ------------------------------------------------------------ Every page ships with no grid-template-columns, so the single implicit column is sized `auto`. An auto track's minimum is content-based, so the track resolves to the widest min-content in the page (~1360px) and stretches every grid item to match, regardless of viewport. Because min-width/min-height:auto on a grid or flex item beats both `width` and `max-width` per spec, this defeated the max-width:100% fix in section 7 — which is why the whole DOM chain reported max-width:100% while still measuring 1360px. Section 0c already contained this fix but scoped it to body.film-lite, and responsive-nav.js only adds film-lite below 900px. That left 1024px and 1280px broken on every page. minmax(0, 1fr) caps the track minimum at 0 so it can never exceed its container. ============================================================ */ body { grid-template-columns: minmax(0, 1fr); min-width: 0; } @media (max-width: 1400px) { /* Neutralise the automatic minimum size ONLY on the top-level grid items. Applying it to every descendant (body *) also let deep text columns shrink toward zero, so card rows squeezed their titles into a ~70px ribbon and broke words mid-syllable instead of wrapping. Leaving min-width:auto on inner items means their min-content width is respected, which combines with flex-wrap:wrap below to make rows REFLOW onto new lines rather than either squeezing or overflowing. */ body > * { min-width: 0; } /* Images carrying an inline max-width:NNNpx larger than their container (e.g. max-width:150px inside a 63px column). */ img[style*="max-width:"] { max-width: 100% !important; } } /* ------------------------------------------------------------ 7d. FLEX ITEMS THAT CANNOT SHRINK BELOW THEIR BASIS Cards are exported as `flex-grow:1; flex-basis:380px; flex-shrink:0`. flex-grow:1 declares the intent "this box is fluid", but flex-shrink:0 stops it shrinking below 380px, so on a 320px viewport it stayed 380px. On mobile Chrome that widens the layout viewport to fit the overflow, which then inflated every position:fixed element (the nav measured 350px inside a 320px viewport) — the overflow looked like a nav bug when the nav was only a symptom. Restoring flex-shrink honours the declared intent rather than overriding the design. ------------------------------------------------------------ */ @media (max-width: 1400px) { [style*="flex-grow: 1"][style*="flex-basis:"] { flex-shrink: 1 !important; } } /* ------------------------------------------------------------ 8. TOUCH TARGETS — FOOTER + TOP BAR Section 4 raises nav links, buttons and tel/mailto links to a 44px minimum on coarse pointers, but footer links were not in that selector list and measured 19px. Section 6 then deliberately dropped the top-bar contact links to 14px to compact the mobile header, which made two of the most-tapped links on the site the hardest to hit. ------------------------------------------------------------ */ @media (pointer: coarse) { footer a { min-height: 44px; display: flex; align-items: center; } /* Keep the compact header height from section 6, but restore a usable hit area by padding rather than by growing line-height. */ #accred-strip > div:first-child a { min-height: 32px !important; padding: 6px 2px !important; } } /* ------------------------------------------------------------ 8b. TOP BAR COLLAPSE HEIGHT index.html caps #accred-strip at max-height:90px as the "open" value for its collapse-on-scroll transition. Once the strip stacks into two rows below 900px that content needs ~96px, so the last row was clipped by 7px. Scoped with :not(.topbar-hidden) and NO !important on purpose — it matches the collapse rule's specificity and simply wins on source order (responsive.css loads after index's inline