From 8a8a64b2f9415b76daa81d390659432cac467a88 Mon Sep 17 00:00:00 2001
From: Nasir Anthony Montalvo <nasiranthonymontalvo@gmail.com>
Date: Wed, 18 Feb 2026 22:38:17 -0600
Subject: [PATCH] fixing horiztonal scrolling

---
 _sass/_custom.scss | 52 ++++++++++++++++++++++------------------------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/_sass/_custom.scss b/_sass/_custom.scss
index 7d66e6b..e7c72c9 100644
--- a/_sass/_custom.scss
+++ b/_sass/_custom.scss
@@ -1210,28 +1210,35 @@ blockquote {
   text-align: center;
 }
 
-
 /* ============================================================================
    GLOBAL MOBILE OVERFLOW FIX
    ============================================================================ */
 
-/* Prevents ANY element from expanding the page width horizontally.
-   This is the single most important rule for the zoom-out bug on mobile. */
 html {
   overflow-x: hidden;
-  box-sizing: border-box;
+  max-width: 100vw;
+}
+
+body {
+  overflow-x: hidden;
+  max-width: 100vw;
+  min-width: 0; 
 }
 
-/* Catch-all: any block element that might overflow */
 *,
 *::before,
 *::after {
-  box-sizing: 100%;
   box-sizing: border-box;
 }
+main,
+main > *:not(.dropdown-menu):not(.modal) {
+  max-width: 100%;
+}
 
-/* Soakies page uses inline <figure> elements with style="display: inline-block; max-width: 75%"
-   These don't respect overflow-x on their parent. Force them to block on mobile. */
+img {
+  max-width: 100%;
+  height: auto;
+}
 figure {
   max-width: 100% !important;
 }
@@ -1260,30 +1267,26 @@ figure {
    SCROLL TO TOP - FULL STYLING (all viewports)
    ============================================================================ */
 
-  #scroll-to-top {
-    position: fixed;
-    bottom: 4.5rem;
-    right: 1rem;
-    z-index: 9999;              
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-  }
+#scroll-to-top {
+  position: fixed;
+  bottom: 4.5rem;
+  right: 1rem;
+  z-index: 9999;              
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
 #scroll-to-top:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
 }
 
-
 /* ============================================================================
    LONG LINKS & BIBLIOGRAPHY - OVERFLOW FIX
    ============================================================================ */
-
-/* Global link wrapping - catches everything */
 a {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
-
-/* Bibliography section - Jekyll renders ### Bibliography as h3, content follows as <p> tags */
 .bibliography,
 h3 + ol,
 h3 + ul,
@@ -1293,8 +1296,7 @@ h3 + p {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
-
-/* Footnotes (extends your existing fix to be more thorough) */
+/* Footnotes */
 .footnotes {
   overflow-x: hidden;
   max-width: 100%;
@@ -1313,21 +1315,17 @@ h3 + p {
   overflow-wrap: break-word;
   max-width: 100%;
 }
-
-/* Jekyll footnote markers */
 .footnote-ref,
 .footnote-backref {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
-
-/* Any <p> or <li> that contains long URLs */
 p, li, td {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
 
-/* Tables - prevent horizontal overflow */
+/* Tables */
 table {
   max-width: 100%;
   overflow-x: auto;