From: Rito Rhymes Date: Sat, 14 Mar 2026 07:59:19 GMT Subject: [PATCH v1 3/6] add 848px mobile banner adjustments to prevent overflow Message-ID: <20260314075922.67391-4-rito@ritovision.com> In-Reply-To: <20260314075922.67391-1-rito@ritovision.com> At widths below 848px, the desktop banner structure is too wide and creates page-wide horizontal scroll overflow, breaking the layout. Introduce a mobile breakpoint at 848px (equivalent to 53em at a 16px base font size), matching the site's existing fixed-width layout scale. Adjust banner sizing and spacing at this breakpoint while preserving the existing desktop layout for viewport widths above it. This patch is intentionally banner-only. The overall mobile layout will still not render correctly until corresponding main-content and footer overflow fixes are applied in follow-up commits. Signed-off-by: Rito Rhymes --- korgi/static/css/main.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/korgi/static/css/main.css b/korgi/static/css/main.css index 3b09d24..19ee328 100644 --- a/korgi/static/css/main.css +++ b/korgi/static/css/main.css @@ -339,3 +339,25 @@ dt { #logo-akamai { padding-bottom: 22px; } + +@media screen and (max-width: 848px) { + #banner { + width: auto; + margin: 0; + border-radius: 0; + border-left: none; + border-right: none; + border-top: none; + } + #banner h1 { + font-size: 2em; + margin: 0.5em 0; + } + #tux-gear { + width: 4em; + height: 5em; + } + #banner li { + padding: 0 0.5em; + } +} -- 2.51.0