diff --git a/CHANGELOG.md b/CHANGELOG.md index cc195fd77c..a66eb0aa6f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ ### Fixes +- [Pull request #1670: Make width-container margins more targetted to avoid specificity issues](https://github.com/alphagov/govuk-frontend/pull/1670). - [Pull request #1655: Ensure components use public `govuk-media-query` mixin](https://github.com/alphagov/govuk-frontend/pull/1655). - [Pull request #1638: Check component item arrays are not empty before outputting markup](https://github.com/alphagov/govuk-frontend/pull/1638). diff --git a/src/govuk/objects/_width-container.scss b/src/govuk/objects/_width-container.scss index 1938abf7fa..e5b145ea81 100644 --- a/src/govuk/objects/_width-container.scss +++ b/src/govuk/objects/_width-container.scss @@ -25,7 +25,8 @@ max-width: $width; // On mobile, add half width gutters - margin: 0 $govuk-gutter-half; + margin-right: $govuk-gutter-half; + margin-left: $govuk-gutter-half; // Respect 'display cutout' safe area (avoids notches and rounded corners) @supports (margin: unquote("max(calc(0px))")) { @@ -40,7 +41,8 @@ // On tablet, add full width gutters @include govuk-media-query($from: tablet) { - margin: 0 $govuk-gutter; + margin-right: $govuk-gutter; + margin-left: $govuk-gutter; // Respect 'display cutout' safe area (avoids notches and rounded corners) @supports (margin: unquote("max(calc(0px))")) { @@ -57,12 +59,14 @@ // As soon as the viewport is greater than the width of the page plus the // gutters, just centre the content instead of adding gutters. @include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") { - margin: 0 auto; + margin-right: auto; + margin-left: auto; // Since a safe area may have previously been set above, // we need to duplicate this margin that centers the page. @supports (margin: unquote("max(calc(0px))")) { - margin: 0 auto; + margin-right: auto; + margin-left: auto; } } @@ -70,7 +74,8 @@ width: $width; // Since media queries are not supported in IE8, // we need to duplicate this margin that centers the page. - margin: 0 auto; + margin-right: auto; + margin-left: auto; } } diff --git a/src/govuk/objects/width-container.test.js b/src/govuk/objects/width-container.test.js index ef1add3739..152884e11a 100644 --- a/src/govuk/objects/width-container.test.js +++ b/src/govuk/objects/width-container.test.js @@ -25,24 +25,28 @@ describe('@mixin govuk-width-container', () => { .toContain(outdent` .app-width-container--wide { max-width: 1200px; - margin: 0 15px; } + margin-right: 15px; + margin-left: 15px; } @supports (margin: max(calc(0px))) { .app-width-container--wide { margin-right: max(15px, calc(15px + env(safe-area-inset-right))); margin-left: max(15px, calc(15px + env(safe-area-inset-left))); } } @media (min-width: 40.0625em) { .app-width-container--wide { - margin: 0 30px; } + margin-right: 30px; + margin-left: 30px; } @supports (margin: max(calc(0px))) { .app-width-container--wide { margin-right: max(30px, calc(15px + env(safe-area-inset-right))); margin-left: max(30px, calc(15px + env(safe-area-inset-left))); } } } @media (min-width: 1260px) { .app-width-container--wide { - margin: 0 auto; } + margin-right: auto; + margin-left: auto; } @supports (margin: max(calc(0px))) { .app-width-container--wide { - margin: 0 auto; } } } + margin-right: auto; + margin-left: auto; } } } `) }) })