From 3e9c3bf738fd580e95bf1481b8974e557caa8559 Mon Sep 17 00:00:00 2001 From: Ben Barnett Date: Fri, 25 Jan 2019 16:37:49 +0000 Subject: [PATCH] Add some IE specific CSS grid syntax MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The layout was broken in IE11. Strangely though, autoprefixer should‘ve taken care of most of it as it does in the [next-article app](https://github.com/Financial-Times/next-article/blob/master/client/components/grid/_helpers.scss) This fixes the more immediate issue however. --- components/x-teaser-timeline/src/TeaserTimeline.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/components/x-teaser-timeline/src/TeaserTimeline.scss b/components/x-teaser-timeline/src/TeaserTimeline.scss index 2d456b0ec..14f66575a 100644 --- a/components/x-teaser-timeline/src/TeaserTimeline.scss +++ b/components/x-teaser-timeline/src/TeaserTimeline.scss @@ -12,7 +12,9 @@ @include oGridRespondTo($from: M) { display: grid; grid-gap: 0 20px; - grid-template: "heading articles" min-content / 1fr 3fr; + grid-template-columns: 1fr 3fr; + grid-template-areas: "heading articles"; + } } @@ -22,6 +24,8 @@ @include oGridRespondTo($from: M) { grid-area: heading; + -ms-grid-row: 1; + -ms-grid-column: 1; } } @@ -32,6 +36,8 @@ @include oGridRespondTo($from: M) { grid-area: articles; + -ms-grid-row: 1; + -ms-grid-column: 3; } }