diff --git a/app/assets/stylesheets/components/_filters.scss b/app/assets/stylesheets/components/_filters.scss index 0719414ad..ed91ed6ea 100644 --- a/app/assets/stylesheets/components/_filters.scss +++ b/app/assets/stylesheets/components/_filters.scss @@ -5,8 +5,20 @@ &.nhsuk-card { background-color: color.scale(nhsuk-colour("grey-4"), $alpha: -50%); + @include nhsuk-responsive-padding(4, "left"); + @include nhsuk-responsive-padding(4, "right"); + @include nhsuk-responsive-padding(2, "bottom"); + .nhsuk-card__heading { + margin-left: #{nhsuk-spacing(-3) - 1px}; + padding-left: nhsuk-spacing(3); background-color: nhsuk-colour("grey-1"); + + // stylelint-disable-next-line max-nesting-depth + @include nhsuk-media-query($from: tablet) { + margin-left: #{nhsuk-spacing(-4) - 1px}; + padding-left: nhsuk-spacing(4); + } } } diff --git a/app/assets/stylesheets/core/objects/_grid.scss b/app/assets/stylesheets/core/objects/_grid.scss index 3ffee05e5..781314ace 100644 --- a/app/assets/stylesheets/core/objects/_grid.scss +++ b/app/assets/stylesheets/core/objects/_grid.scss @@ -32,11 +32,11 @@ .app-grid-column-filters { display: block; - @include nhsuk-grid-column(one-third, $at: large-desktop); + @include nhsuk-grid-column(one-third, $at: desktop); } .app-grid-column-results { - @include nhsuk-grid-column(two-thirds, $at: large-desktop); + @include nhsuk-grid-column(two-thirds, $at: desktop); } .app-grid-column-filters > .nhsuk-card--feature,