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

Adjust chart layout for improved responsiveness and image fitting

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-30 10:25:46 +02:00
parent 4951b1138c
commit 6d64c97858
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/css/styles.css
View File

@@ -96,17 +96,21 @@ form button {
} }
#chart { #chart {
flex: 1; flex: 2; /* Take 2/3 of the width */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
width: 100%; /* Ensure chart takes full width */ width: 100%;
height: 75%; /* Ensure the container takes full height */
} }
#chart img { #chart img {
max-width: 100%; max-width: 100%;
height: auto; max-height: 100%;
height: 100%; /* Ensure the image fits vertically 100% */
width: 100%; /* Ensure the image spans 100% width */
object-fit: contain; /* Ensure the image fits within the container */
} }
#question-block { #question-block {
@@ -126,6 +130,11 @@ form button {
#chart { #chart {
margin-bottom: 0; margin-bottom: 0;
flex: 2; /* Ensure it takes 2/3 of the width on larger screens */
}
#question-block {
flex: 1; /* Take 1/3 of the width */
} }
} }