From c5e7c9b31aadc86e54c8f10bee85ef205a3e2ba3 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Fri, 30 Aug 2024 12:51:21 -0400 Subject: [PATCH 1/2] PXBF-dev: new tablet breakpoint --- benefit-finder/src/shared/styles/breakpoints/_index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/benefit-finder/src/shared/styles/breakpoints/_index.scss b/benefit-finder/src/shared/styles/breakpoints/_index.scss index 72fba38a7..630c5c788 100644 --- a/benefit-finder/src/shared/styles/breakpoints/_index.scss +++ b/benefit-finder/src/shared/styles/breakpoints/_index.scss @@ -1,3 +1,4 @@ @use '../functions/index.scss' as *; $desktop: rem(1049px); +$tablet: rem(479px); From 903654ba780e2d7a218d893f228de6847c341167 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Fri, 30 Aug 2024 12:51:46 -0400 Subject: [PATCH 2/2] PXBF-dev: adjust width on buttons across screen widths --- .../components/LifeEventSection/_index.scss | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/benefit-finder/src/shared/components/LifeEventSection/_index.scss b/benefit-finder/src/shared/components/LifeEventSection/_index.scss index 95f33ba7d..56c321193 100644 --- a/benefit-finder/src/shared/components/LifeEventSection/_index.scss +++ b/benefit-finder/src/shared/components/LifeEventSection/_index.scss @@ -35,13 +35,28 @@ min-width: rem(120px); } - .bf-usa-button:first-of-type { - margin-right: space.$space-lg-plus; + .bf-usa-modal-group { + width: 100%; } button, .bf-usa-modal-group a { - margin-bottom: space.$space-md; + margin: 0; + } + + @media (width >= $tablet) { + .bf-usa-button:first-of-type { + margin-right: space.$space-lg-plus; + } + + .bf-usa-modal-group { + width: auto; + } + + button, + .bf-usa-modal-group a { + margin-bottom: space.$space-md; + } } }