diff --git a/web/new website/style.css b/web/new website/style.css index df50097..7598d8e 100644 --- a/web/new website/style.css +++ b/web/new website/style.css @@ -9,10 +9,13 @@ body { height: 100vh; margin: 0; background-color: #f0f0f0; + flex-direction: column; + background-color: #afafaf; + } .gaugeGroup { - width: 70vw; + width: 98vw; height: 20vh; display: flex; flex-direction: column; /* Keep as column */ @@ -22,6 +25,8 @@ body { padding: 10px; border-radius: 50px; border: 2px solid #333; + clear: both; + margin-bottom: 10px; } .groupTitle { width: 100%; @@ -44,7 +49,7 @@ body { justify-content: space-around; flex-wrap: wrap; width: 20%; - height: 100%; + height: 110%; background-color: #ddd; color: #333; padding: 10px; @@ -70,12 +75,13 @@ body { .gaugeImage { width: 100%; height: auto; - max-height: 100%; + max-height: 180%; object-fit: contain; position: absolute; /* Make the image position absolute */ top: 0; left: 0; z-index: 1; /* Make the image display below the needle */ + bottom: 0; } .gaugeValue, .gaugeText { @@ -91,7 +97,7 @@ body { font-size: 24px; z-index: 2; position: absolute; - bottom: -30px; /* Adjust this value to move the text further down */ + bottom: -50px; /* Adjust this value to move the text further down */ } @@ -108,10 +114,10 @@ body { .needle { position: absolute; - margin-bottom: 2%; /* Lower the needle to the bottom */ + bottom: -40%; /* Lower the needle to the bottom */ left: 50%; width: 2px; - height: 70%; + height: 110%; background-color: black; transform-origin: bottom; z-index: 3; /* Make the needle display above the image */ @@ -122,4 +128,5 @@ body { flex-direction: row; /* Layout children side by side */ width: 100%; height: 100%; -} \ No newline at end of file +} +