Marijn/TijdVoorDeTest
1
0
Fork 0
mirror of https://github.com/MarijnDoeve/TijdVoorDeTest.git synced 2026-07-05 07:00:14 +02:00
Code Issues Packages Projects Releases Activity

Fix quiz page vertical centering regression

Browse Source 
The CSS cleanup broke vertical centering: flex on body causes main to
stretch full-width; place-items:center on a grid body only centers
items within their auto-sized track (not the track within body).

Fix: move background/color to html (full-viewport grid that centers
body), give body height:100% + display:grid + align-content:center
(centers the content track within full-height body) + justify-self:center
(shrink-wraps body width). Matches production behavior exactly.
This commit is contained in:
Marijn Doeve
2026-07-01 21:32:16 +02:00
parent d94eeced8c
commit e5198507ae
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/quiz.scss
+13 -7
View File
@@ -1,17 +1,23 @@
html { html {
height: 100%; height: 100%;
}
body {
min-height: 100%;
background-image: url("../img/background.png"); background-image: url("../img/background.png");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: black; background-color: black;
color: white; color: white;
display: flex; display: grid;
flex-direction: column; align-items: center;
justify-content: center; }
body {
height: 100%;
background-image: url("../img/background.png");
background-position: center;
background-repeat: no-repeat;
background-color: black;
display: grid;
align-content: center;
justify-self: center;
} }
.elimination-screen { .elimination-screen {