fix: fix mobile landing section divider and fix hamburger clicking ar…

…ea bug
ucsddesignco · Jun 3, 2024 · 2c0f847 · 2c0f847
1 parent ee624a3
commit 2c0f847
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/src/app/components/Navbar/Hamburger/Hamburger.scss b/src/app/components/Navbar/Hamburger/Hamburger.scss
@@ -7,6 +7,7 @@
   border: none;
   padding-block: calc($main-padding-mobile-block/2);
   padding-inline: calc($main-padding-mobile-inline/2 - $hamburger-width/2);
+  z-index: 5;
 
   @media (min-width: $mobile-breakpoint) {
     padding-block: calc($main-padding-tablet-block/2);
@@ -25,7 +26,6 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    z-index: 5;
   }
 
   .line {

diff --git a/src/app/components/Navbar/Navbar.scss b/src/app/components/Navbar/Navbar.scss
@@ -22,11 +22,9 @@ nav {
   }
 
   .nav-container {
-    @media (min-width: $mobile-breakpoint) {
-      border-right: 1.5px solid $outline-gray;
-    }
     padding-inline: $main-padding-mobile-inline;
     padding-block: $main-padding-mobile-block;
+    padding-top: 5rem;
     width: 100vw;
     max-width: 400px;
     background: $primary-white;
@@ -48,17 +46,15 @@ nav {
       transform: translateX(-100%);
     }
 
-    @media (max-width: $mobile-breakpoint) {
-      padding-inline: clamp(34px, 12px + 1.2vw, 40px);
-      padding-top: 5rem;
-    }
-
     @media (min-width: $mobile-breakpoint) {
+      border-right: 1.5px solid $outline-gray;
       padding-inline: $main-padding-desktop-inline;
       padding-block: $main-padding-desktop-block;
+      padding-top: $main-padding-tablet-block;
     }
 
     @media (min-width: $tablet-breakpoint) {
+      padding-top: $main-padding-desktop-block;
       max-width: 500px;
       width: $nav-width;
       visibility: visible;

diff --git a/src/app/pages/Landing/Landing.scss b/src/app/pages/Landing/Landing.scss
@@ -102,6 +102,10 @@
     }
   }
 
+  .mobile-line {
+    margin-inline: $main-padding-mobile-inline;
+  }
+
   @media (min-width: $tablet-breakpoint) {
     .mobile-header,
     .add-me-to-cart {