zuevav/VH_posting_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Force mobile nav rules with !important to defeat stale CSS cache

Browse Source 
After multiple deploys the mobile nav still wraps into a tall stack on
some user devices. The CSS source is correct, so the most likely cause
is Safari aggressively caching the previous stylesheet. Adding
!important to the @media block guarantees that once the new CSS
actually parses, no leftover specificity quirk or cached partial
keeps the wrapped layout alive.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
zuevav
2026-05-14 23:52:24 +03:00
parent 7ed7d22b6d
commit 3e1cc94258
1 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+14 -12
View File
@@ -238,29 +238,31 @@ body {
}
/* On narrow screens, switch to horizontal scrolling so all 6 tabs stay
on a single row instead of breaking into a tall stack. Placed after
the base .nav-btn rules so its specificity-tie-breaker wins. */
on a single row instead of breaking into a tall stack. !important is
used defensively here — any cached older CSS or future style overrides
shouldn't be able to bring back the wrapped layout on phones. */
@media (max-width: 720px) {
.main-nav {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 4px;
padding: 6px;
gap: 4px !important;
padding: 6px !important;
}
.main-nav::-webkit-scrollbar {
display: none;
}
.nav-btn {
flex: 0 0 auto;
min-width: auto;
white-space: nowrap;
flex: 0 0 auto !important;
min-width: auto !important;
max-width: none !important;
white-space: nowrap !important;
scroll-snap-align: start;
padding: 10px 14px;
font-size: 0.88rem;
padding: 10px 14px !important;
font-size: 0.88rem !important;
}
}