Increase spacing on mobile for homepage

For the new homepage design, the total space on the left and right of the content should be `24px` for mobile, increasing it from `15px`.
alphagov · Oct 12, 2023 · bc071b5 · bc071b5
1 parent 72600d8
commit bc071b5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/app/assets/stylesheets/views/_homepage_header.scss b/app/assets/stylesheets/views/_homepage_header.scss
@@ -4,10 +4,14 @@ $pale-blue-colour: #d2e2f1;
 
 .homepage-header {
   background-color: $govuk-brand-colour;
-  padding-bottom: govuk-spacing(7);
-  padding-top: govuk-spacing(4);
+  padding: govuk-spacing(4) 9px govuk-spacing(7);
   @include govuk-typography-common;
 
+  @include govuk-media-query($from: tablet) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   @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
@@ -124,7 +124,12 @@
 }
 
 .homepage-section--promotion-slots {
-  padding: 26px 0 govuk-spacing(4);
+  padding: 26px 9px govuk-spacing(4);
+
+  @include govuk-media-query($from: "tablet") {
+    padding-left: 0;
+    padding-right: 0;
+  }
 
   @include govuk-media-query($from: "desktop") {
     padding: govuk-spacing(9) 0;
@@ -157,7 +162,12 @@
 }
 
 .homepage-section--services-and-info {
-  padding: govuk-spacing(8) 0 0;
+  padding: govuk-spacing(8) 9px 0;
+
+  @include govuk-media-query($from: tablet) {
+    padding-left: 0;
+    padding-right: 0;
+  }
 
   @include govuk-media-query($from: "desktop") {
     padding: govuk-spacing(9) govuk-spacing(4) govuk-spacing(9) 0;
@@ -191,7 +201,12 @@
 }
 
 .homepage-section__government-activity {
-  padding: 0 0 24px;
+  padding: 0 9px 24px;
+
+  @include govuk-media-query($from: "tablet") {
+    padding-left: 0;
+    padding-right: 0;
+  }
 
   @include govuk-media-query($from: "desktop") {
     padding-top: govuk-spacing(9);
@@ -200,7 +215,12 @@
 }
 
 .homepage-section__more-on-govuk {
-  padding: 0 0 govuk-spacing(8);
+  padding: 0 9px govuk-spacing(8);
+
+  @include govuk-media-query($from: "tablet") {
+    padding-left: 0;
+    padding-right: 0;
+  }
 
   @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
@@ -3,7 +3,12 @@
 
 .homepage-section__popular-links {
   background: govuk-colour("white");
-  padding: govuk-spacing(8) 0 0;
+  padding: govuk-spacing(8) 9px 0;
+
+  @include govuk-media-query($from: "tablet") {
+    padding-left: 0;
+    padding-right: 0;
+  }
 
   @include govuk-media-query($from: "desktop") {
     padding: govuk-spacing(9) 0 28px;