PXBF-1954-mobile-layout-updates: update width of form containers to r…

…emove padding at desktop
GSA · Nov 21, 2024 · 2b8aa8b · 2b8aa8b
1 parent 04de5a2
commit 2b8aa8b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/benefit-finder/src/Routes/LifeEventSection/_index.scss b/benefit-finder/src/Routes/LifeEventSection/_index.scss
@@ -1,7 +1,7 @@
 @use '@styles/colors' as color;
 @use '@styles/breakpoints' as *;
 @use '@styles/space' as space;
-@use '@styles/sizes' as *;
+@use '@styles/sizes' as size;
 @use '@styles/mixins' as *;
 @use '@styles/functions' as *;
 
@@ -10,6 +10,14 @@
   background-color: color.$officer-navy;
   margin: 0;
   padding-bottom: space.$padding-bottom-xl;
+
+  .bf-grid-container.grid-container {
+    max-width: size.$form-container-max-width;
+
+    @media (width >= $desktop) {
+      padding: 0;
+    }
+  }
 }
 
 .bf-section-wrapper {

diff --git a/benefit-finder/src/shared/components/Form/_index.scss b/benefit-finder/src/shared/components/Form/_index.scss
@@ -1,4 +1,6 @@
 @use '../../styles/colors/index.scss' as color;
+@use '@styles/sizes' as size;
+@use '@styles/breakpoints' as *;
 @use '@styles/functions' as *;
 
 form.bf-usa-form {
@@ -7,6 +9,10 @@ form.bf-usa-form {
   margin: 0;
 
   .bf-grid-container.grid-container {
-    max-width: rem(1234px)
+    max-width: size.$form-container-max-width;
+
+    @media (width >= $desktop) {
+      padding: 0;
+    }
   }
 }
diff --git a/benefit-finder/src/shared/styles/sizes/_index.scss b/benefit-finder/src/shared/styles/sizes/_index.scss
@@ -1,3 +1,4 @@
 @use '@styles/functions/_index.scss' as *;
 
 $button-max-width: rem(248px);
+$form-container-max-width: rem(1234px)