max and min width fixed

css/main.css

@@ -3,7 +3,8 @@
 }
 
 head {
-  max-width: 100%;
+  min-width: 390px;
+  max-width: 575.98px;
   display: flex;
   flex-direction: column;
 }
@@ -14,7 +15,8 @@ body {
   background: linear-gradient(360deg, rgba(235, 238, 255, 0.6) 0%, rgba(245, 246, 252, 0.6) 100%);
   margin-left: auto;
   margin-right: auto;
-  max-width: 100%;
+  min-width: 390px;
+  max-width: 575.98px;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

index.html

@@ -62,22 +62,25 @@
         <div class="col-6">
           <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px; display: flex; justify-content: center; height: 100%;">
             <div class="card-body">
-              <i class="bi bi-wind"></i>
-              <p class="card-title" style="font-size: medium;"><b>Air Quality</b></p>
-              <p class="card-subtitle mb-2 text-muted" style="font-size: x-small;">PM2.5 (μg./m<sup>3</sup>)</p>
-              <div  style="text-align: center;">
+              <img src="./images/wind.png" width="24">
+              <p class="card-title" style="font-size: medium; font-weight: 500;"><b>Air Quality</b></p>
+              <p class="card-subtitle mb-2 text-muted" style="font-size: small; font-weight: 300;">PM2.5 (μg./m<sup>3</sup>)</p>
+              <div style="text-align: center;">
                 <img id="home-pm25-pic" src="icon/pm1.png" width="48">
-                <b><p id="home-pm25" style="font-size: 3rem; color: #36455A; position: relative;">-</p></b>
-                <p>US AQI</p>
-                <span id="pm25state" class="badge rounded-pill text-light" style="background-color: #A1A8B9;">Moderate</span>
-                <p id="pm25describe" class="text-on-card mt-2" style="font-size: 10px; margin-top: auto;">Take a walk or play outside, the air is great today.</p>
+                <p id="home-pm25" style="font-size: 3rem; color: #36455A; position: relative; font-weight: 500;">-</p>
+                <p style="font-weight: 400; color: #6A6F7D;">US AQI</p>
+                <span id="pm25state" class="badge rounded-pill text-light" style="background-color: #A1A8B9; font-weight: 500;">-</span>
+                
               </div>
             </div>
+            <div class="card-footer bg-transparent border-light">
+              <p id="pm25describe" class="text-on-card mt-2" style="font-size: small; margin-top: auto;">Take a walk or play outside, the air is great today.</p>
+            </div>
           </div>
         </div>
         
         <div class="col-6">
-          <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
+          <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px; display: flex; justify-content: center; height: 50%;">
             <div class="card-body">
               <img src="./images/thermometer.png" width="24">
               <div style="color: #A1A8B9;">
@@ -86,7 +89,7 @@
               <p class="card-text" style="color: #6A6F7D;">Temperature</p>
             </div>
           </div>
-          <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
+          <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px; display: flex; justify-content: center; height: 50%;">
             <div class="card-body">
               <img src="./images/droplet.png" width="24">
               <div style="color: #A1A8B9;">
@@ -95,15 +98,15 @@
               <p class="card-text" style="color: #6A6F7D;">Humidity</p>
             </div>
           </div>
-          <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
+          <!-- <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
             <div class="card-body">
-              <img src="./images/snow_wind.png" width="24">
+              <img src="./images/snow-wind.png" width="24">
               <div style="color: #A1A8B9;">
                 <b><p id="home-pm10" style="font-size: 2rem; display: inline; color: #36455A;">-</p></b> (μg./m<sup>3</sup>)
               </div>
               <p class="card-text" style="color: #6A6F7D;">PM 10</p>
             </div>
-          </div>
+          </div> -->
         </div>
   
       </div>
@@ -170,8 +173,9 @@
             <img id="forecast-pic" class="mt-5" style="align-items: center;" width="200rem">
   
             <br>
-            <b><p id="forecast-temperature" style="font-size: 5rem; display: inline; color: #36455A; text-align: center;">-</p></b> °C
-            <p id="forecast-description" style="display: block;"></p>
+            <p id="forecast-temperature" style="font-size: 5rem; display: inline; color: #36455A; text-align: center; font-weight: 400;">-</p> 
+            <p style="display: inline; font-size: 2rem; color: #A1A8B9;">°C</p>
+            <p id="forecast-description" style="display: block; font-weight: 500; color: #6A6F7D;"></p>
           </div>  
           <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
             <!-- <div class="card-body"> -->

index.js

@@ -224,6 +224,7 @@ function updateHTML() {
     } else if (new Date().getMinutes != 0 && update_interval) {
         update_interval = false;
     }
+    
 }
 
 function init() {