From 9dd2063876c66d1cd009280142db5b40196dea8a Mon Sep 17 00:00:00 2001
From: "David A. Kennedy" <davidakennedy@git.wordpress.org>
Date: Thu, 3 Nov 2016 19:43:15 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@39124 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../themes/twentyseventeen/assets/css/ie8.css | 22 +++++++++++++++++++
 .../themes/twentyseventeen/style.css          | 22 +++++++++++++------
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/wp-content/themes/twentyseventeen/assets/css/ie8.css b/src/wp-content/themes/twentyseventeen/assets/css/ie8.css
index 850240f767..f0e315d069 100644
--- a/src/wp-content/themes/twentyseventeen/assets/css/ie8.css
+++ b/src/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;
diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css
index dd52b8ac1a..b155cfa01e 100644
--- a/src/wp-content/themes/twentyseventeen/style.css
+++ b/src/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,