Changeset 39124

Timestamp:

11/03/2016 07:43:15 PM (10 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; */
         }