make cost estimator project responsive

nicholeuf · Jan 27, 2024 · 1422e00 · 1422e00
1 parent 7366c20
commit 1422e00
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/html-css-bootcamp/CostEstimatorProject/index.css b/html-css-bootcamp/CostEstimatorProject/index.css
@@ -116,6 +116,7 @@ h1 {
   text-transform: uppercase;
   margin: 16px 0;
   border-radius: 10px;
+  box-sizing: border-box;
 }
 
 .sessions-card p {
@@ -269,3 +270,40 @@ h1 {
 .card .savings p {
   padding: 0;
 }
+
+@media only screen and (max-width: 750px) {
+  .card-wrapper {
+    flex-wrap: wrap-reverse;
+  }
+
+  .card {
+    width: 100%;
+  }
+
+  .sessions-card {
+    width: 80%;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  body {
+    padding: 16px;
+  }
+
+  h1 {
+    margin: 0 0 16px 0;
+  }
+
+  .container {
+    padding: 0 16px;
+  }
+
+  .sessions-card {
+    width: 100%;
+  }
+
+  .toggle-wrapper {
+    width: 90%;
+    justify-content: space-around;
+  }
+}