lfg2025/deepstock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use 100dvh so hero/quiz centre against the visible viewport on mobile

Browse Source 
Mobile browsers report 100vh as the viewport at its largest (URL bar
hidden), so flex-centred content sat below the visual centre whenever
the address bar was showing. Add 100dvh declarations after the existing
100vh ones on body, #app, .app and .quiz-section (and on the .mod-panel
max-height) so modern browsers track the visible viewport while older
browsers keep the vh fallback.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-05-09 21:14:11 +01:00
parent d106661f68
commit 67dfa38e04
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/styles.css
View File

@@ -30,14 +30,16 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent;
-webkit-overflow-scrolling: touch; }
body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; height: 100vh; overflow: hidden; }
body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; height: 100vh; height: 100dvh; overflow: hidden; }
/* Vue mount point — match the body's full viewport so .app inside can
reach 100vh the way it did pre-Vue. The original <main class="app">
reach full height the way it did pre-Vue. The original <main class="app">
was a direct child of <body>; the new wrapper div has to forward those
dimensions or the hero stops short. */
dimensions or the hero stops short. dvh tracks the visible viewport so
mobile centering survives the URL-bar show/hide. */
#app {
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
}
@@ -87,7 +89,7 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
.lang-btn.active { background: var(--red); color: #FFFFFF; }
/* ── APP ── */
.app { padding-top: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.app { padding-top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
/* ── HERO ── */
.hero {
@@ -372,6 +374,7 @@ html[lang="en"] .hero h1 { font-size: calc((100vw - 32px) / 5.2); }
.quiz-section {
width: 100%;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
@@ -727,7 +730,7 @@ body.paint-green .qpb-logo {
top: 72px;
right: 12px;
width: 280px;
max-height: calc(100vh - 84px);
max-height: calc(100dvh - 84px);
overflow-y: auto;
background: rgba(255,255,255,0.96);
border: 1px solid var(--border);