styling

web/newWebsite/styles/dashboard-styles.css

@@ -6,21 +6,20 @@
 }
 
 body {
-    padding-top: 5vw;
     display: flex;
     justify-content: center;
-    align-items: center;
-    height: 100vh;
     margin: 0;
+    margin-top: 8vh;
     background-color: #f0f0f0;
     flex-direction: column;
     background-color: #afafaf;
+    align-items: center;
 
 }
 
 .gaugeGroup {
     width: 98vw;
-    height: 20vh;
+    height: auto;
     display: flex;
     flex-direction: column; /* Keep as column */
     justify-content: flex-start;
@@ -32,8 +31,8 @@ body {
     clear: both;
     margin-bottom: 10px;
     position: relative;
-    float: top;
 }
+
 .groupTitle {
     width: 100%;
     text-align: center;
@@ -76,7 +75,9 @@ body {
     height: 80%; /* Increase the height from 70% to 80% */
     position: relative;
     overflow: visible;
-    
+    height: 5vh;    
+    margin-bottom: 1vh;
+
 }
 
 .gaugeImage {
@@ -89,7 +90,6 @@ body {
     left: 0;
     z-index: 1; /* Make the image display below the needle */
     bottom: 0;
-    margin-bottom: 10px;
 }
 
 .gaugeValue, .gaugeText {
@@ -179,4 +179,15 @@ body {
     color: #fff;
     text-decoration: none;
     font-size: 18px;
+}
+
+.plotly-container {
+
+    float: bottom;
+    margin: auto;
+    padding: 1vw;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    width: 20vw;
 }