fixed some mobile css

feliciahmq · Jun 24, 2024 · 03f77c4 · 03f77c4
1 parent a91eb80
commit 03f77c4
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/src/components/header/Header.css b/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;
             }

diff --git a/src/components/header/Header.jsx b/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>

diff --git a/src/pages/landing/banner/LandingBanner.css b/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;
     }

diff --git a/src/pages/userprofile/UserProfile.css b/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;
+    }
 }