Responding to Small Laptops

Author: zJiaJun

starter/08-Omnifood-Responsive/css/queries.css

@@ -0,0 +1,19 @@
+/* rem and em do NOT depend on html font-size in media queries!
+ Instead, 1rem = 1em = 16px */
+
+/* 1350 / 16 = 84.375 */
+
+/**************************/
+/* Below 1344px (Smaller desktops) */
+/**************************/
+@media (max-width: 84em) {
+  .hero {
+    max-width: 120rem;
+  }
+  .heading-primary {
+    font-size: 4.4rem;
+  }
+  .gallery {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

starter/08-Omnifood-Responsive/css/style.css

@@ -65,19 +65,6 @@
   padding: 4.8rem 0 9.6rem 0;
 }
 
-@media (max-width: 1200px) {
-  .section-hero {
-    background-color: orangered;
-  }
-}
-
-@media (max-width: 600px) {
-  .section-hero {
-    border: 20px dashed blue;
-    background-color: greenyellow;
-  }
-}
-
 .hero {
   max-width: 130rem;
   margin: 0 auto;

starter/08-Omnifood-Responsive/index.html

@@ -13,6 +13,7 @@
 
     <link rel="stylesheet" href="css/general.css" />
     <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/queries.css" />
 
     <script
       type="module"