/* ========================================================================== BIT — RESPONSIVE CORRECTIONS -------------------------------------------------------------------------- What this file is: the single place where mobile/tablet layout defects are corrected. It is loaded LAST in , after style.css AND after each page's own custom_css, so an equal-specificity rule here wins on source order and needs no !important. Why it exists as one file rather than 29 per-page edits: the per-page CSS lives in BOTH database/seeders/content/css/*.css and the pages.custom_css / life_at_bits.custom_css columns. Editing it in place means keeping two copies in step and losing the fix on the next db:seed. One stylesheet applies to every page, post, activity and notice — including content the client creates later. HARD RULE: every rule below is inside a max-width media query. Nothing here can alter rendering at >= 992px. Desktop parity with template/ (see the drift baseline) is therefore untouched by design. Breakpoints used: <= 991.98px tablets and phones — structural caps (widths, gutters, nav) <= 767.98px phones — display-type scale ========================================================================== */ /* ========================================================================== 1. HEADER — the site-wide 873px break -------------------------------------------------------------------------- At 768-991px the brand lock-up (42px crest + 376px wordmark) plus the four right-hand links and the burger measured 873px inside a 720px .container, so EVERY page on the site overflowed on a tablet. The three text links (News/Notices, Apply, Login) are markup-hidden below 768px already (`d-none d-md-block`) because they do not fit; they simply still do not fit at 768-991px. Extending that same treatment up to 992px keeps the design's own decision instead of inventing a new one. Every one of those destinations remains reachable from the mega menu, which is what phone visitors already use. The "Menu" trigger carries `d-md-block` WITHOUT `d-none`, so `.d-none` below selects exactly the three menu links and never the trigger. ========================================================================== */ @media (max-width: 991.98px) { .bit-navbar .nav-right .nav-link-top.d-none { display: none !important; /* beats Bootstrap's own .d-md-block utility */ } /* Keep the brand from being the next thing to overflow on a small tablet. */ .bit-navbar .navbar-brand { min-width: 0; flex-shrink: 1; } .bit-navbar .text-logo { font-size: clamp(0.95rem, 2.6vw, 1.6rem); line-height: 1.15; margin-left: 0; overflow-wrap: break-word; } } /* -------------------------------------------------------------------------- 1b. ONE LOGO LOCK-UP AT A TIME (576-767px) -------------------------------------------------------------------------- The design's two logo images carry breakpoints that do not meet: the desktop crest and the wordmark are `d-none d-sm-block` (shown from 576px) while the mobile lock-up is `d-xl-none d-md-none` (hidden only from 768px). Between 576 and 767 the header therefore draws BOTH - crest 247px + wordmark + the full mobile logo - measuring 772px inside a 576px viewport on every page of the site. Inherited from template/headers.php, so it is not a porting error, but the client's "fix each and every page for responsiveness" supersedes the earlier rule about leaving the design's own overflows alone. Below 768 the mobile lock-up is the design's own choice of mark, so the desktop pair is hidden and the phone rendering (<576, where both are already `d-none`) is unchanged. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .bit-navbar .dextop_logo, .bit-navbar .text-logo { display: none !important; /* beats Bootstrap's .d-sm-block utility */ } } /* ========================================================================== 2. GRID GUTTERS MUST NOT EXCEED THEIR CONTAINER'S PADDING -------------------------------------------------------------------------- A Bootstrap .row pulls itself outwards by half its gutter. That is only invisible when the container pays it back with equal padding. Two shapes on this site break that contract and pushed the document 12px wider each side: * `.row.g-5` (24px pull) inside a plain `.container` (12px padding) -> bit-mun, careers, contact, student-support * any gutter row inside `.container.px-0` (0 padding) -> our-story Below 992px every column is stacked full width, so horizontal gutters draw nothing at all — removing the excess is visually neutral and costs no vertical spacing, which lives on --bs-gutter-y and is left alone. ========================================================================== */ @media (max-width: 991.98px) { .container > .row, .container-fluid > .row, .container-sm > .row, .container-md > .row, .container-lg > .row { --bs-gutter-x: 1.5rem; /* 24px gutter => 12px pull == container padding */ } /* No padding to pay the pull back with, so there must be no pull. */ .container.px-0 > .row, .container-fluid.px-0 > .row, .px-0 > .row { --bs-gutter-x: 0; } } /* ========================================================================== 3. MEDIA AND EMBEDS NEVER EXCEED THEIR COLUMN -------------------------------------------------------------------------- Applies to imported notice bodies too (607 WordPress posts carry authored markup with hardcoded width/height attributes on images, PDF