updating home page media queries

shubho0908 · Mar 11, 2023 · fb09185 · fb09185
1 parent fa37166
commit fb09185
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/src/Components/Deals.js b/src/Components/Deals.js
@@ -7,6 +7,7 @@ import { AddToList, RemoveList } from "../action/List";
 import { useSelector, useDispatch } from "react-redux";
 import Footer from "./Footer";
 import Spinner from "./Spinner";
+import LowerNav from "./LowerNav";
 import { NavLink } from "react-router-dom";
 
 function Deals() {
@@ -101,6 +102,9 @@ function Deals() {
             );
           })}
       </div>
+      <div className="lowerNav">
+        <LowerNav />
+      </div>
       <Footer />
     </div>
   );

diff --git a/src/Components/navbar.css b/src/Components/navbar.css
@@ -243,3 +243,43 @@ a {
   color: inherit;
   text-decoration: none;
 }
+.lowerNav{
+  display: none;
+}
+
+
+/* MEDIA QUERIES */
+
+@media (max-width: 990px) {
+  .search-bar{
+    margin-left: 55px;
+  }
+  .search-box{
+    width: 240px;
+  }
+}
+
+@media (max-width: 830px) {
+  .search-bar{
+    margin-left: 25px;
+  }
+  .search-box{
+    width: 180px;
+  }
+}
+
+@media (max-width: 720px) {
+  .search-bar{
+    position: absolute;
+    right: 65px;
+  }
+  .search-box{
+    width: 180px;
+  }
+  .right-section{
+    display: none;
+  }
+  .lowerNav{
+    display: block;
+  }
+}