diff --git a/benefit-finder/src/Routes/LifeEventSection/_index.scss b/benefit-finder/src/Routes/LifeEventSection/_index.scss index f3aedafa..20b5e40b 100644 --- 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 index 50ef95e3..094610b2 100644 --- 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 index 31df8810..a6987ab2 100644 --- 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)