/* ================================================================ mobile.css — Venkataraman Lab (v5 — precision fixes) Save as: Assets/mobile.css Add to every HTML page after home.css: ================================================================ */ /* ── Global ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ================================================================ MOBILE ONLY (< 768px) ================================================================ */ @media (max-width: 767px) { /* ── FIX 1 (ROOT CAUSE of publications overflow): home.css sets 200px padding each side on .publications-col. On a ~390px phone that leaves no room for text at all. ── */ .publications-col { padding-left: 14px !important; padding-right: 14px !important; } /* ── FIX 2 (ROOT CAUSE of meetings text vertical stacking): home.css forces .row to flex-direction:row on < 600px, which crushes every Bootstrap column to near-zero width. Revert to Bootstrap's normal stacking behaviour. ───────── */ .row:not(.carousel-inner):not(.slideshow-row) { flex-direction: column !important; } /* ── FIX 3: paragraph-box has fixed height:500px — remove it. ─ */ .paragraph-box { height: auto !important; padding-top: 1rem; } /* ── FIX 4: Header — stack logo below title ──────────────────── */ #header { flex-direction: column !important; text-align: center !important; padding-top: 1rem !important; } #header .col-md-8, #header .col-md-4 { text-align: center !important; width: 100% !important; max-width: 100% !important; } #header .h1 { font-size: 1.5rem; } #header .h4 { font-size: 0.95rem; } #header img { max-height: 140px !important; margin: 0.5rem auto 0.75rem; display: block; } /* ── FIX 5: Home page group photo — fill full width ──────────── */ .group-slideshow { width: 100% !important; max-width: 100% !important; } .group-slideshow img, #slide-group { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; } /* ── FIX 6: Publications TOC slideshow image ─────────────────── */ .toc-slideshow img, #slide-pub { width: 100% !important; height: auto !important; } /* Override bare col-4 if HTML hasn't been changed yet */ .row.my-4 .col-4.text-center { flex: 0 0 83.333% !important; max-width: 83.333% !important; margin: 0 auto !important; } /* ── FIX 7: Year navigation — keep year links from mid-breaking ─ */ .publications-col a { white-space: nowrap; display: inline; } /* ── FIX 8: Navbar hamburger ─────────────────────────────────── */ .navbar-toggler { border-color: rgba(255,255,255,0.5) !important; } .navbar-toggler-icon { filter: brightness(2); } .navbar-nav .nav-item { text-align: center; padding: 0.25rem 0; } } /* end @media (max-width: 767px) */