media queries for home page

Resilient-Labs · Jan 10, 2025 · 40ace63 · 40ace63
1 parent 2fbc40f
commit 40ace63
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="public/img/favicon.ico"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Kinfolx</title>
   </head>

diff --git a/public/img/favicon.ico b/public/img/favicon.ico
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -14,9 +14,9 @@ export default function Header() {
                 <div className="logo">
                     <a href="/">Kinfolx</a>
                 </div>
-                <SearchBar />
+                <SearchBar className="header_search" />
                 <ul className="nav-links">
-                    <li>
+                    <li className="header_home">
                         <a href="/">Home</a>
                     </li>
                     <li>
@@ -27,16 +27,12 @@ export default function Header() {
                     </li>
                 </ul>
                 <div className="auth-links">
-                    {/* <a href="/signup">Sign Up</a>
-                    <a href="/login">Login</a> */}
-                    {/* <div className="user"> */}
                     <SignedOut>
                         <SignInButton />
                     </SignedOut>
                     <SignedIn>
                         <UserButton />
                     </SignedIn>
-                    {/* </div> */}
                 </div>
             </nav>
         </header>

diff --git a/src/components/Header/header.css b/src/components/Header/header.css
@@ -57,3 +57,8 @@
 .auth-links a:hover {
     text-decoration: underline;
 }
+@media (max-width:600px)  {
+    .header_home, .header_home a {
+        display: none;
+    }
+}
diff --git a/src/components/SearchBar/searchBar.css b/src/components/SearchBar/searchBar.css
@@ -51,3 +51,9 @@
 .header_search-btn:active {
     background-color: #3d2c1f;
 }
+@media (max-width:600px)  {
+    .header_search-form {
+        display: none;
+    }
+
+}
diff --git a/src/pages/Home/home.css b/src/pages/Home/home.css
@@ -9,9 +9,9 @@
 }
 @media (max-width:600px)  {
     .home_home-container {
-        flex-direction: row;
+        /* flex-direction: row; */
     }
     .home_home-container {
-        background-color: white;
+        /* background-color: white; */
     }
 }