Making Responsive

Author: Aman Kumar Sinha

project-5/insta-story.css

@@ -1,5 +1,6 @@
 body {
   background-color: rgb(209, 200, 173);
+  overflow: hidden;
 }
 
 main {
@@ -12,12 +13,14 @@ main {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 1rem;
+    padding: 2rem;
     flex-direction: column;
+    height: 90vh;
+    width: 100%;
 
     & .card {
-      height: 55rem;
-      width: 33rem;
+      height: 100%;
+      width: 40%;
       box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
         rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
       border-radius: 1rem;
@@ -82,3 +85,29 @@ main {
     }
   }
 }
+
+@media (width <= 992px) {
+  main {
+    & .container {
+      padding: 0;
+      height: 100vh;
+      & .card {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+
+@media (width <= 576px) {
+  main {
+    & .container {
+      padding: 0;
+      height: 100vh;
+      & .card {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}