fix side padding mobile

acmucsd · Dec 10, 2024 · 860a1c3 · 860a1c3
1 parent 0e28ebe
commit 860a1c3
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/src/components/Footer/style.module.scss b/src/components/Footer/style.module.scss
@@ -11,26 +11,39 @@
   margin: 0 calc(vars.$side-padding * -1);
 
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+
+  @media screen and (max-width: vars.$breakpoint-md) {
+    padding: 4rem vars.$side-padding-mobile;
+    margin: 0 calc(vars.$side-padding-mobile * -1);
+  }
 }
 
 .backgroundLeft {
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: -1;
-  max-width: min(100%, 580px);
+  max-width: min(100% - 2 * vars.$side-padding, 580px);
   height: auto;
   object-fit: contain;
+
+  @media screen and (max-width: vars.$breakpoint-md) {
+    max-width: min(100% - 2 * vars.$side-padding-mobile, 580px);
+  }
 }
 
 .backgroundRight {
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: -1;
-  max-width: min(100%, 850px);
+  max-width: min(100% - 2 * vars.$side-padding, 850px);
   height: auto;
   object-fit: contain;
+
+  @media screen and (max-width: vars.$breakpoint-md) {
+    max-width: min(100% - 2 * vars.$side-padding-mobile, 850px);
+  }
 }
 
 .links {