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;
}
/* ============================================================================
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;