fix responsivness

Author: sammjainn

_sass/03-layouts/home.scss

@@ -101,30 +101,57 @@
 .unordered-list {
   list-style: lower-roman;
 }
-@media screen and (min-width: 1440px) {
+@media screen and (max-width: 376px) {
+  #introduction {
+    margin-top: 0;
+  }
   .introduction {
-    div {
-      max-width: 1440px;
-    }
-    padding-bottom: 5%;
+    padding-bottom: 10%;
+    background-image: none;
+    background-color: $main-color;
+  }
+  .home-content {
+    margin-top: -2rem;
   }
+}
+@media screen and (max-width: 426px) {
   #introduction {
-    padding-top: 5%;
+    font-size: 24px;
+    margin-top: 20%;
   }
-  .problem-definition {
-    div {
-      max-width: 1440px;
+  .introduction {
+    padding-bottom: 40%;
+
+    > div {
+      max-width: 100%;
     }
   }
-}
-@media screen and (max-width: 1439px) {
-  #introduction {
-    padding-top: 10%;
+  .home-content {
+    margin-top: -7rem;
+  }
+  .problem-definition,
+  .introduction {
+    font-size: 16px;
+  }
+  .post-content {
+    h2 {
+      font-size: 22px;
+      text-align: center;
+    }
+    h3 {
+      font-size: 18px;
+    }
   }
 }
-@media screen and (min-width: 1101px) {
+@media screen and (max-width: 769px) {
+  .paper-bg {
+    padding: 2rem 3rem;
+  }
+  .home-content {
+    margin-top: -5rem;
+  }
   .introduction {
-    background-size: contain;
+    padding-bottom: 20%;
   }
 }
 @media screen and (max-width: 1101px) {
@@ -136,7 +163,7 @@
     text-align: justify;
     background-repeat: no-repeat;
     padding-top: 10%;
-    padding-bottom: 25%;
+    padding-bottom: 13%;
 
     div {
       background-image: none;
@@ -161,53 +188,29 @@
     margin: 1rem 0 2rem;
   }
 }
-@media screen and (max-width: 769px) {
-  .paper-bg {
-    padding: 2rem 3rem;
-  }
-  .home-content {
-    margin-top: -5rem;
+@media screen and (min-width: 1101px) {
+  .introduction {
+    background-size: contain;
   }
 }
-@media screen and (max-width: 426px) {
+@media screen and (max-width: 1439px) {
   #introduction {
-    font-size: 24px;
-    margin-top: 20%;
-  }
-  .introduction {
-    padding-bottom: 40%;
-
-    > div {
-      max-width: 100%;
-    }
-  }
-  .home-content {
-    margin-top: -7rem;
+    padding-top: 10%;
   }
-  .problem-definition,
+}
+@media screen and (min-width: 1440px) {
   .introduction {
-    font-size: 16px;
-  }
-  .post-content {
-    h2 {
-      font-size: 22px;
-      text-align: center;
-    }
-    h3 {
-      font-size: 18px;
+    div {
+      max-width: 80%;
     }
+    padding-bottom: 5%;
   }
-}
-@media screen and (max-width: 376px) {
   #introduction {
-    margin-top: 0;
-  }
-  .introduction {
-    padding-bottom: 10%;
-    background-image: none;
-    background-color: $main-color;
+    padding-top: 5%;
   }
-  .home-content {
-    margin-top: -2rem;
+  .problem-definition {
+    div {
+      max-width: 1440px;
+    }
   }
 }