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

Rito Rhymes
2026-03-16T18:00:50Z

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>
Assisted-by: claude-opus-4-6
---
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