Merge pull request #3374 from metabrainz/ansh/fix-homepage-overflow

fix: overflow issue on homepage on mobile

Author: MonkeyDo

frontend/css/sass/homepage.scss

@@ -34,6 +34,7 @@ $homepage-background-inverted: linear-gradient(
     scroll-snap-align: start;
     scroll-snap-stop: always;
     min-height: 100%;
+    overflow: hidden;
 
     @media (max-width: map.get($grid-breakpoints, "md")) {
       min-height: calc(var(--vh, 1vh) * 100 - $navbar-height);
@@ -57,7 +58,7 @@ $homepage-background-inverted: linear-gradient(
       height: 12vh;
       gap: 2vh;
 
-      @media (max-width: map.get($grid-breakpoints, "xs")) {
+      @media (max-width: map.get($grid-breakpoints, "sm")) {
         display: none;
       }
     }
@@ -564,6 +565,7 @@ $homepage-background-inverted: linear-gradient(
       }
       .listen-container {
         top: 8vh;
+        padding: 0 25px;
       }
 
       .homepage-upper-vector-3 {
@@ -574,6 +576,11 @@ $homepage-background-inverted: linear-gradient(
         height: min(41%, 375px);
         top: 25%;
       }
+
+      .homepage-info {
+        padding: 0 25px;
+        width: 100%;
+      }
     }
 
     .homepage-lower {
@@ -596,6 +603,11 @@ $homepage-background-inverted: linear-gradient(
       .listen-container {
         top: 3vh;
       }
+
+      .homepage-info {
+        padding: 0 25px;
+        width: 100%;
+      }
     }
 
     .homepage-information {
@@ -619,7 +631,7 @@ $homepage-background-inverted: linear-gradient(
     }
   }
 
-  @media (max-width: map.get($grid-breakpoints, "xs")) {
+  @media (max-width: map.get($grid-breakpoints, "sm")) {
     .homepage-upper {
       .homepage-upper-vector-3 {
         height: 7%;
@@ -695,11 +707,11 @@ $homepage-background-inverted: linear-gradient(
   }
 }
 
-@media (max-width: map.get($grid-breakpoints, "xs")) {
+@media (max-width: map.get($grid-breakpoints, "sm")) {
   #homepage-container {
     .homepage-upper,
     .homepage-lower {
-      padding-left: 25px;
+      padding-left: 0;
     }
   }
 }