1800nasi/bqkc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixing horiztonal scrolling

Browse Source
This commit is contained in:
Nasir Anthony Montalvo
2026-02-18 22:38:17 -06:00
parent 3504d1173c
commit 8a8a64b2f9
1 changed files with 25 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
_sass/_custom.scss
View File

@@ -1210,28 +1210,35 @@ blockquote {
text-align: center; text-align: center;
} }
/* ============================================================================ /* ============================================================================
GLOBAL MOBILE OVERFLOW FIX 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 { html {
overflow-x: hidden; 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, *::before,
*::after { *::after {
box-sizing: 100%;
box-sizing: border-box; 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%" img {
These don't respect overflow-x on their parent. Force them to block on mobile. */ max-width: 100%;
height: auto;
}
figure { figure {
max-width: 100% !important; max-width: 100% !important;
} }
@@ -1260,30 +1267,26 @@ figure {
SCROLL TO TOP - FULL STYLING (all viewports) SCROLL TO TOP - FULL STYLING (all viewports)
============================================================================ */ ============================================================================ */
#scroll-to-top { #scroll-to-top {
position: fixed; position: fixed;
bottom: 4.5rem; bottom: 4.5rem;
right: 1rem; right: 1rem;
z-index: 9999; z-index: 9999;
transition: transform 0.2s ease, box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease;
} }
#scroll-to-top:hover { #scroll-to-top:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
} }
/* ============================================================================ /* ============================================================================
LONG LINKS & BIBLIOGRAPHY - OVERFLOW FIX LONG LINKS & BIBLIOGRAPHY - OVERFLOW FIX
============================================================================ */ ============================================================================ */
/* Global link wrapping - catches everything */
a { a {
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
/* Bibliography section - Jekyll renders ### Bibliography as h3, content follows as <p> tags */
.bibliography, .bibliography,
h3 + ol, h3 + ol,
h3 + ul, h3 + ul,
@@ -1293,8 +1296,7 @@ h3 + p {
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
/* Footnotes */
/* Footnotes (extends your existing fix to be more thorough) */
.footnotes { .footnotes {
overflow-x: hidden; overflow-x: hidden;
max-width: 100%; max-width: 100%;
@@ -1313,21 +1315,17 @@ h3 + p {
overflow-wrap: break-word; overflow-wrap: break-word;
max-width: 100%; max-width: 100%;
} }
/* Jekyll footnote markers */
.footnote-ref, .footnote-ref,
.footnote-backref { .footnote-backref {
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
/* Any <p> or <li> that contains long URLs */
p, li, td { p, li, td {
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
/* Tables - prevent horizontal overflow */ /* Tables */
table { table {
max-width: 100%; max-width: 100%;
overflow-x: auto; overflow-x: auto;