Merge pull request #3801 from alphagov/increase-spacing-mobile-new-ho…

…mepage Increase spacing on mobile for homepage
alphagov · Oct 13, 2023 · cbce3bd · cbce3bd
2 parents bad755b + edd4439
commit cbce3bd
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 0 deletions.
diff --git a/app/assets/stylesheets/views/_homepage_header.scss b/app/assets/stylesheets/views/_homepage_header.scss
@@ -8,6 +8,13 @@ $pale-blue-colour: #d2e2f1;
   padding-top: govuk-spacing(4);
   @include govuk-typography-common;
 
+  // Add 9px of padding to the left and right on mobile screen sizes
+  // This gives a total size of 24px (9px padding + 15px margin)
+  @include govuk-media-query($until: "tablet") {
+    padding-left: 9px;
+    padding-right: 9px;
+  }
+
   @include govuk-media-query($from: desktop) {
     padding-bottom: govuk-spacing(8);
     padding-top: govuk-spacing(6);

diff --git a/app/assets/stylesheets/views/_homepage_new.scss b/app/assets/stylesheets/views/_homepage_new.scss
@@ -126,6 +126,13 @@
 .homepage-section--promotion-slots {
   padding: 26px 0 govuk-spacing(4);
 
+  // Add 9px of padding to the left and right on mobile screen sizes
+  // This gives a total size of 24px (9px padding + 15px margin)
+  @include govuk-media-query($until: "tablet") {
+    padding-left: 9px;
+    padding-right: 9px;
+  }
+
   @include govuk-media-query($from: "desktop") {
     padding: govuk-spacing(9) 0;
   }
@@ -159,6 +166,13 @@
 .homepage-section--services-and-info {
   padding: govuk-spacing(8) 0 0;
 
+  // Add 9px of padding to the left and right on mobile screen sizes
+  // This gives a total size of 24px (9px padding + 15px margin)
+  @include govuk-media-query($until: "tablet") {
+    padding-left: 9px;
+    padding-right: 9px;
+  }
+
   @include govuk-media-query($from: "desktop") {
     padding: govuk-spacing(9) govuk-spacing(4) govuk-spacing(9) 0;
   }
@@ -193,6 +207,13 @@
 .homepage-section__government-activity {
   padding: 0 0 24px;
 
+  // Add 9px of padding to the left and right on mobile screen sizes
+  // This gives a total size of 24px (9px padding + 15px margin)
+  @include govuk-media-query($until: "tablet") {
+    padding-left: 9px;
+    padding-right: 9px;
+  }
+
   @include govuk-media-query($from: "desktop") {
     padding-top: govuk-spacing(9);
     padding-right: govuk-spacing(4);
@@ -202,6 +223,13 @@
 .homepage-section__more-on-govuk {
   padding: 0 0 govuk-spacing(8);
 
+  // Add 9px of padding to the left and right on mobile screen sizes
+  // This gives a total size of 24px (9px padding + 15px margin)
+  @include govuk-media-query($until: "tablet") {
+    padding-left: 9px;
+    padding-right: 9px;
+  }
+
   @include govuk-media-query($from: "desktop") {
     padding: govuk-spacing(9) 0;
   }

diff --git a/app/assets/stylesheets/views/_popular_links.scss b/app/assets/stylesheets/views/_popular_links.scss
@@ -5,6 +5,13 @@
   background: govuk-colour("white");
   padding: govuk-spacing(8) 0 0;
 
+  // Add 9px of padding to the left and right on mobile screen sizes
+  // This gives a total size of 24px (9px padding + 15px margin)
+  @include govuk-media-query($until: "tablet") {
+    padding-left: 9px;
+    padding-right: 9px;
+  }
+
   @include govuk-media-query($from: "desktop") {
     padding: govuk-spacing(9) 0 28px;
   }