fixed mobile css

src/components/header/Header.css

@@ -18,6 +18,11 @@
         cursor: pointer;
     }
 
+    .MechHub_Logo_Mobile {
+        height: 32px;
+        cursor: pointer;
+    }
+
     .hamburger {
         display: none;
         font-size: 30px;
@@ -111,6 +116,12 @@
             display: block;
         }
 
+        .banner {
+            h1 {
+                font-size: 20px;
+            }
+        }
+
         ul {
             display: none;
             flex-direction: column;
@@ -132,7 +143,6 @@
                 flex-direction: row;
                 flex-wrap: wrap;
                 justify-content: center;
-
                 margin: 8px;
                 cursor: pointer;
             }

src/components/header/Header.jsx

@@ -8,6 +8,7 @@ import { db } from '../../lib/firebaseConfig';
 
 import SearchBar from '../searchbar/Searchbar';
 import MechHub_Logo from "../../assets/Logo/MechHub_logo.png";
+import Mechhub_Logo_Mobile from "../../assets/Logo/MH_logo.png";
 import "./Header.css";
 
 function Header() {
@@ -71,11 +72,20 @@ function Header() {
 
     return (
         <nav className='navbar'>
-            <img 
-                src={MechHub_Logo} 
-                className="MechHub_Logo"
-                onClick={handleLogoClick} 
-            />
+            {!isMobile ? (
+                <img 
+                    src={MechHub_Logo} 
+                    className="MechHub_Logo"
+                    onClick={handleLogoClick} 
+                />
+            ) : (
+                <img 
+                    src={Mechhub_Logo_Mobile} 
+                    className="MechHub_Logo_Mobile"
+                    onClick={handleLogoClick} 
+                />
+            )
+            }
             <div className='header-searchbar'>
                 <SearchBar onSearch={setSearchQuery} />
             </div>

src/pages/landing/banner/LandingBanner.css

@@ -59,6 +59,13 @@
     .banner img {
         display: none;
     }
+
+    .banner h1 {
+        font-size: 32px;
+    }
+    .banner p {
+        font-size: 16px;
+    }
     .faq {
         display: none;
     }

src/pages/search/SearchPage.css

@@ -34,4 +34,12 @@
     padding: 12px;
     top: 100px;
 }
+
+.product-filter {
+    font-size: 16px;
+}
+    .product-filter select {
+        padding: 5px;
+        font-size: 12px;
+    }
 }

src/pages/search/filter/productFilter.css

@@ -100,4 +100,13 @@
         width: 100%;
         top: 24px;
     }
+
+    .filter-group label {
+        font-size: 12px;
+    }
+    .display {
+        position: relative;
+        font-size: 12px;
+        top: -6px;
+    }
 }

src/pages/search/filter/productFilter.jsx

@@ -78,7 +78,7 @@ function ProductFilter({ minPrice, maxPrice, onFilterChange, onSortChange }) {
                             onChange={handleMaxPriceChange}
                         />
                     </div>
-                    <div>
+                    <div className='display'>
                         <span>{priceRange[0]}</span> - <span>{priceRange[1]}</span>
                     </div>
                 </div>

src/pages/userprofile/UserProfile.css

@@ -95,7 +95,6 @@
     display: flex;
     flex-direction: row;
     gap: 10px;
-    right: 20px;
 
     > button {
         border-radius: 20px;
@@ -104,7 +103,7 @@
         color: #FFFFFF;
         font-size: 10px;
         font-weight: bold;
-        padding: 12px 45px;
+        padding: 12px;
         letter-spacing: 1px;
         text-transform: uppercase;
         transition: transform 80ms ease-in;
@@ -204,4 +203,9 @@
             }
         }
     }
+    .profile-buttons {
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+    }
 }