Building the smaller tablets

zangeronimo · zangeronimo · commit 16877143df28 · 2022-12-04T12:25:06.000-03:00
diff --git a/starter/07-Omnifood-Desktop/css/general.css b/starter/07-Omnifood-Desktop/css/general.css
@@ -110,10 +110,6 @@ body {
   grid-template-columns: repeat(4, 1fr);
 }
 
-.grid--5-cols {
-  grid-template-columns: repeat(5, 1fr);
-}
-
 .heading-primary,
 .heading-secondary,
 .heading-tertiary {
diff --git a/starter/07-Omnifood-Desktop/css/queries.css b/starter/07-Omnifood-Desktop/css/queries.css
@@ -170,4 +170,47 @@ Instead, 1rem = 1em = 16px */
   .main-nav-link:visited {
     font-size: 3rem;
   }
+
+  .pricing-plan {
+    width: 85%;
+  }
+}
+
+/*************************************/
+/* BELOW 704px (Smaller tablets) */
+/*************************************/
+
+@media (max-width: 44em) {
+  .heading-secondary {
+    margin-bottom: 4.8rem;
+  }
+
+  .grid--3-cols,
+  .grid--4-cols {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .diets {
+    grid-column: 1 / -1;
+    justify-self: center;
+  }
+
+  .pricing-plan {
+    width: 100%;
+  }
+
+  .grid--footer {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .nav-col {
+    grid-row: 1;
+    grid-column: span 2;
+    margin-bottom: 3.2rem;
+  }
+
+  .logo-col,
+  .address-col {
+    grid-column: span 3;
+  }
 }
diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html
@@ -18,7 +18,7 @@
     <link rel="stylesheet" href="css/queries.css" />
   </head>
   <body>
-    <header class="header nav-open">
+    <header class="header">
       <a href="#">
         <img src="img/omnifood-logo.png" alt="Omnifood logo" class="logo" />
       </a>
