Changeset 7019

Timestamp:

04/04/2018 01:16:11 AM (7 years ago)

Author:

iandunn

Message:

WP15: Fix header image dimensions on IE11.

File:

• sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15/style.css (modified) (3 diffs)

sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15/style.css

@@ -66 +66 @@
     .site-header {
         display: grid;
-        grid-template-rows: auto 70px;
-        grid-template-columns: auto 300px;
+        grid-template-rows: auto 1fr;
+        grid-template-columns: auto 3fr;
+    }
+
+    @media screen and ( min-width: 370px ) {
+        .site-header {
+            grid-template-rows: auto 70px;
+            grid-template-columns: auto 300px;
+        }
     }
 }
@@ -123 +130 @@
 
 .custom-logo-link img {
-    max-width: 300px;
-    max-height: 218px;
+    max-width: 90%;
+    max-height: 90%;
+}
+
+/*
+ * IE <= 11 can't scale SVGs properly, so set fixed dimensions.
+ *
+ * @see https://gist.github.com/larrybotha/7881691
+ */
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .custom-logo-link img {
+        max-width: 150px;
+        max-height: 100px;
+    }
+}
+
+@media screen and ( min-width: 475px ) {
+    .custom-logo-link img {
+        max-width: 300px;
+        max-height: 218px;
+    }
 }
 
@@ -148 +174 @@
 
 .main-navigation.toggled-on .menu-top-menu-container {
+    position: absolute;
     width: 100vw;
+    border-bottom: 1px solid #eee;
 }