PXBF-1954-mobile-layout-updates: adjust mobile padding

GSA · Dec 9, 2024 · f0af6ab · f0af6ab
1 parent ad3e5cb
commit f0af6ab
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/benefit-finder/src/Routes/ResultsView/components/Results/_index.scss b/benefit-finder/src/Routes/ResultsView/components/Results/_index.scss
@@ -3,6 +3,12 @@
 @use '@styles/mixins' as *;
 @use '@styles/functions' as *;
 
+.bf-result-view {
+ .bf-grid-container.grid-container {
+  padding: rem(20px);
+ }
+}
+
 .bf-result-view-benefits,
 .bf-result-view-unmet,
 .bf-result-view-relevant-benefits,

diff --git a/benefit-finder/src/shared/components/Accordion/_index.scss b/benefit-finder/src/shared/components/Accordion/_index.scss
@@ -1,5 +1,6 @@
 @use '@styles/colors' as color;
 @use '@styles/mixins' as *;
+@use '@styles/breakpoints' as *;
 @use '@styles/functions' as *;
 
 .bf-usa-accordion {
@@ -28,6 +29,10 @@
   }
 
   .bf-usa-accordion__content {
-    padding: 0 rem(18px) rem(40px);
+    padding: 0 rem(16px) rem(24px);
+
+    @media(width >= $desktop) {
+      padding: 0 rem(18px) rem(40px);
+    }
   }
 }
diff --git a/benefit-finder/src/shared/components/KeyElegibilityCrieriaList/_index.scss b/benefit-finder/src/shared/components/KeyElegibilityCrieriaList/_index.scss
@@ -8,8 +8,12 @@
     @include h6;
 
     background-color: color.$base-light-grey;
-    padding: rem(16px) rem(32px);
+    padding: rem(27px) rem(18px);
     margin: 0;
+
+    @media (width >= $desktop) {
+      padding: rem(16px) rem(32px);
+    }
   }
 
   .bf-key-eligibility-criteria-sub-heading {
@@ -24,12 +28,16 @@
       @include list-items;
 
       margin: 0;
-      padding: rem(16px) rem(32px);
+      padding: rem(16px) rem(23px);
       border: rem(2px) solid color.$base-light-grey;
       border-bottom: 0;
       display: flex;
       flex-wrap: nowrap;
 
+      @media (width >= $desktop) {
+        padding: rem(16px) rem(32px);
+      }
+
       .bf-checkmark--green {
         height: 100%;
         margin-right: rem(32px);
@@ -49,10 +57,11 @@
 }
 
 .bf-unmet-criteria-group {
-  padding: rem(18px) 0 0 rem(24px);
+  padding: rem(18px) 0 0 rem(10px);
 
     @media (width >= $desktop) {
       padding-top: rem(24px);
+      padding-left: rem(24px);
     }
 
   .bf-unmet-criteria-title {