Changeset 39124

Timestamp:

11/03/2016 07:43:15 PM (8 years ago)

Author:

davidakennedy

Message:

Twenty Seventeen: Fix site name and description appearing off screen in some browsers

• Occurred in Firefox and IE 11.
• Removes Flexbox in favor of more well-supported display: table; layout technique.
• Maintains consistent layout on smaller screens.

Props laurelfulford.

Fixes #38543.

Location:

trunk/src/wp-content/themes/twentyseventeen

Files:

• assets/css/ie8.css (modified) (3 diffs)
• style.css (modified) (7 diffs)

trunk/src/wp-content/themes/twentyseventeen/assets/css/ie8.css

@@ -61 +61 @@
 }
 
+.has-header-image.twentyseventeen-front-page .custom-header,
+.has-header-image.home.blog .custom-header {
+    display: block;
+}
+
 .custom-header-image {
     background-position: bottom center;
@@ -67 +72 @@
 .site-branding {
     padding: 45px 0;
+}
+
+.has-header-image.twentyseventeen-front-page .site-branding,
+.has-header-image.home.blog .site-branding {
+    bottom: 0;
+    display: block;
+    left: 0;
+    height: auto;
+    padding-top: 0;
+    position: absolute;
+    width: 100%;
 }
 
@@ -194 +210 @@
 /* RTL Styles */
 
+.rtl .has-header-image.twentyseventeen-front-page .site-branding,
+.rtl .has-header-image.home.blog .site-branding {
+    left: auto;
+    right: 0;
+}
+
 .rtl .entry-footer .cat-links,
 .rtl .entry-footer .tags-links {

trunk/src/wp-content/themes/twentyseventeen/style.css

@@ -1543 +1543 @@
     background-color: #fafafa;
     position: relative;
+    overflow: hidden;
 }
 
@@ -1564 +1565 @@
 .site-branding a:focus {
     opacity: 0.7;
-}
-
-.has-header-image.twentyseventeen-front-page .site-branding,
-.has-header-image.home.blog .site-branding {
-    align-self: flex-end;
 }
 
@@ -1640 +1636 @@
 .has-header-image.twentyseventeen-front-page .custom-header,
 .has-header-image.home.blog .custom-header {
-    display: flex;
+    display: table;
+    height: 100%;
     min-height: 300px;
     min-height: 75vh;
+    width: 100%;
 }
 
@@ -1701 +1699 @@
 body:not(.has-header-image) .custom-header-image {
     padding: 5% 0;
+}
+
+.has-header-image.twentyseventeen-front-page .site-branding,
+.has-header-image.home.blog .site-branding {
+    display: table-cell;
+    height: 100%;
+    vertical-align: bottom;
 }
 
@@ -3242 +3247 @@
     .has-header-image.home.blog .site-branding {
         bottom: 0;
+        display: block;
+        left: 0;
+        height: auto;
         padding-top: 0;
         position: absolute;
@@ -3249 +3257 @@
     .has-header-image.twentyseventeen-front-page .custom-header,
     .has-header-image.home.blog .custom-header {
+        display: block;
         min-height: 0;
     }
@@ -3550 +3559 @@
         max-height: 100%;
         overflow: hidden;
-        /* padding: 10% 0; */
     }