oleh/minivlat-local-ua
1
0
Fork 0
mirror of https://github.com/olehomelchenko/minivlat-local-ua.git synced 2025-12-21 21:22:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance CSS styles for full-height layout and improved quiz container alignment

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-28 03:30:51 +02:00
parent 3b1b383489
commit b905c221cc
2 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/quiz.html
View File

@@ -13,9 +13,9 @@
<body> <body>
<div id="quiz-container"> <div id="quiz-container">
<div id="timer">Time remaining: <span id="time">25</span>s</div> <div id="timer">Time remaining: <span id="time">25</span>s</div>
<div id="quiz" style="display: flex;"> <div id="quiz">
<div id="chart" style="flex: 1; display: flex; justify-content: center; align-items: center;"></div> <div id="chart"></div>
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;"> <div id="question-block">
<div id="question-text"></div> <div id="question-text"></div>
<div id="options"></div> <div id="options"></div>
<!-- Removed submit button --> <!-- Removed submit button -->

31
src/css/styles.css
View File

@@ -3,6 +3,13 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #ffffff; background-color: #ffffff;
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
} }
h1, h2, h3 { h1, h2, h3 {
@@ -70,9 +77,22 @@ form button {
margin-top: 20px; margin-top: 20px;
} }
#quiz-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
#quiz { #quiz {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
} }
#chart { #chart {
@@ -80,7 +100,16 @@ form button {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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) { @media (min-width: 768px) {