From b905c221cc3613106edfdcbb0aa26e04865e9fd0 Mon Sep 17 00:00:00 2001 From: Oleh Omelchenko Date: Tue, 28 Jan 2025 03:30:51 +0200 Subject: [PATCH] Enhance CSS styles for full-height layout and improved quiz container alignment --- public/quiz.html | 6 +++--- src/css/styles.css | 31 ++++++++++++++++++++++++++++++- 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/public/quiz.html b/public/quiz.html index cf36e22..68bcff7 100644 --- a/public/quiz.html +++ b/public/quiz.html @@ -13,9 +13,9 @@
Time remaining: 25s
-
-
-
+
+
+
diff --git a/src/css/styles.css b/src/css/styles.css index 74d0592..a220504 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -3,6 +3,13 @@ body { margin: 0; padding: 0; background-color: #ffffff; + height: 100%; +} + +html, body { + height: 100%; + margin: 0; + padding: 0; } h1, h2, h3 { @@ -70,9 +77,22 @@ form button { margin-top: 20px; } +#quiz-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; +} + #quiz { display: flex; flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; } #chart { @@ -80,7 +100,16 @@ form button { display: flex; justify-content: center; align-items: center; - margin-bottom: 20px; + padding: 20px; +} + +#question-block { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 20px; } @media (min-width: 768px) {