From ec835f6c0eb61c2924d26e2b61ffe25e026165f9 Mon Sep 17 00:00:00 2001
From: Medha <medhakvinod@gmail.com>
Date: Tue, 11 Jun 2024 21:06:12 +0530
Subject: [PATCH] Made AQI Calculator responsive (#1258)

---
 .../Air-Quality-Index-Calculator/style.css    | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/Calculators/Air-Quality-Index-Calculator/style.css b/Calculators/Air-Quality-Index-Calculator/style.css
index 8b0db0b95..51661ab69 100644
--- a/Calculators/Air-Quality-Index-Calculator/style.css
+++ b/Calculators/Air-Quality-Index-Calculator/style.css
@@ -28,15 +28,16 @@ body {
     color: rgb(10, 10, 10);
     text-align: center;
     width: 40%;
-    height: 40%;
+    height: fit-content;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     padding-top: 50px;
 }
 
 #input-label {
-    font-size: 20px;
+    font-size: 23px;
     font-weight: 500;
     color: #000000;
+    margin-bottom: 20px;
 }
 
 #input-id {
@@ -72,3 +73,37 @@ button:hover {
     justify-content: center;
     font-weight: bold;
 }
+
+@media (max-width: 992px) {
+    .container {
+        width: 60%;
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        width: 60%;
+    }
+
+    #input-id {
+        margin-top: 20px;
+    }
+}
+
+@media (max-width: 576px) {
+    .container {
+        width: 70%;
+        padding: 20px;
+        height: fit-content;
+    }
+
+    #input-id {
+        margin-top: 20px;
+        margin-bottom: 0px;
+        margin-left: 0px;
+    }
+
+    #input-label {
+        font-size: 15px;
+    }
+}