[PATCH v1 3/6] add 848px mobile banner adjustments to prevent overflow

From: Rito Rhymes <rito@ritovision.com>
Date: Mar 14, 2026, 07:59 UTC
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 <rito@ritovision.com>
---
 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