diff --git a/app/assets/stylesheets/views/_homepage_header.scss b/app/assets/stylesheets/views/_homepage_header.scss index 788fc659b8..92851ad071 100644 --- 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 index 00cc5b4e7d..6da7231ee1 100644 --- 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 index 6366706766..0e814717fa 100644 --- 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; }