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.

Built from https://develop.svn.wordpress.org/trunk@39124


git-svn-id: http://core.svn.wordpress.org/trunk@39064 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -60,6 +60,11 @@ img {
 	overflow: hidden;
 }
 
+.has-header-image.twentyseventeen-front-page .custom-header,
+.has-header-image.home.blog .custom-header {
+	display: block;
+}
+
 .custom-header-image {
 	background-position: bottom center;
 }
@@ -68,6 +73,17 @@ img {
 	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%;
+}
+
 .has-header-image .custom-header-image img,
 .has-header-image .custom-header-image video {
 	left: 0;
@@ -193,6 +209,12 @@ ol.children .children {
 
 /* 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 {
 	padding-right: 0;

wp-content/themes/twentyseventeen/style.css

@@ -1542,6 +1542,7 @@ body {
 .site-header {
 	background-color: #fafafa;
 	position: relative;
+	overflow: hidden;
 }
 
 /* Site branding */
@@ -1565,11 +1566,6 @@ body {
 	opacity: 0.7;
 }
 
-.has-header-image.twentyseventeen-front-page .site-branding,
-.has-header-image.home.blog .site-branding {
-	align-self: flex-end;
-}
-
 .site-title {
 	clear: none;
 	font-size: 24px;
@@ -1639,9 +1635,11 @@ body:not(.title-tagline-hidden) .site-branding-text {
 
 .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%;
 }
 
 .custom-header-image {
@@ -1702,6 +1700,13 @@ 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;
+}
+
 /*--------------------------------------------------------------
 ## Front Page
 --------------------------------------------------------------*/
@@ -3241,6 +3246,9 @@ object {
 	.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%;
@@ -3248,6 +3256,7 @@ object {
 
 	.has-header-image.twentyseventeen-front-page .custom-header,
 	.has-header-image.home.blog .custom-header {
+		display: block;
 		min-height: 0;
 	}
 
@@ -3549,7 +3558,6 @@ object {
 		height: 100vh;
 		max-height: 100%;
 		overflow: hidden;
-		/* padding: 10% 0; */
 	}
 
 	.twentyseventeen-front-page.has-header-image .custom-header-image:before,

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-beta1-39123';
+$wp_version = '4.7-beta1-39124';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.