Merge pull request #1147 from alphagov/fix-centering-container-ie8

Fix container not being centered in IE8
alphagov · Jan 17, 2019 · 0730e73 · 0730e73
2 parents 9a11120 + 52f3ac5
commit 0730e73
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,6 +36,12 @@
 
   ([PR #1148](https://github.com/alphagov/govuk-frontend/pull/1148))
 
+- Fix container not being centered in IE8
+
+  Since the header and the footer component use this container it also fixes centering for these components.
+
+  ([PR #1147](https://github.com/alphagov/govuk-frontend/pull/1147))
+
 ## 2.5.1 (Fix release)
 
 🔧 Fixes:

diff --git a/src/objects/_width-container.scss b/src/objects/_width-container.scss
@@ -2,10 +2,6 @@
   // Limit the width of the container to the page width
   max-width: $govuk-page-width;
 
-  @include govuk-if-ie8 {
-    width: $govuk-page-width;
-  }
-
   // On mobile, add half width gutters
   margin: 0 $govuk-gutter-half;
 
@@ -19,6 +15,13 @@
   @include govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") {
     margin: 0 auto;
   }
+
+  @include govuk-if-ie8 {
+    width: $govuk-page-width;
+    // Since media queries are not supported in IE8,
+    // we need to duplicate this margin that centers the page.
+    margin: 0 auto;
+  }
 }
 
 @include govuk-exports("govuk/objects/width-container") {