Update style.css

Author: SuRu190

task07-show-hide-paragraph/style.css

@@ -6,7 +6,8 @@ body {
 }
 
 .container {
-    width: 30%;
+    width: 90%;
+    max-width: 500px;
     background-color: white;
     margin: auto;
     padding: 30px 20px 50px 20px;
@@ -17,8 +18,8 @@ body {
 .input-sec {
     display: flex;
     align-items: center;
-    justify-content: space-around;
-    gap: 10px;
+    justify-content: center;
+    gap: 30px;
 }
 
 p {
@@ -33,4 +34,62 @@ button {
     border: 2px solid chartreuse;
     border-radius: 8px;
     background-color: chartreuse;
-}
+}
+
+/* Below 600px */
+@media (max-width: 600px) {
+  body {
+    padding: 50px 20px;
+  }
+
+  .container {
+    padding: 25px 15px 40px 15px;
+    border-radius: 30px;
+  }
+
+  .input-sec {
+    gap: 20px;
+  }
+
+  p {
+    font-size: 18px;
+  }
+
+  button {
+    font-size: 14px;
+    padding: 8px 16px;
+  }
+}
+
+/* Below 400px */
+@media (max-width: 400px) {
+  .input-sec {
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  p {
+    font-size: 16px;
+  }
+
+  button {
+    width: 100%;
+  }
+}
+
+/* Below 260px */
+@media (max-width: 260px) {
+  .container {
+    padding: 20px 10px;
+    border-radius: 20px;
+  }
+
+  p {
+    font-size: 14px;
+  }
+
+  button {
+    font-size: 13px;
+    padding: 6px 12px;
+  }
+}