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
This commit is contained in:
David A. Kennedy 2016-11-04 17:10:31 +00:00
parent 8fa49e77bd
commit 6c82930a5d
3 changed files with 38 additions and 8 deletions

View File

@ -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;

View File

@ -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,

View File

@ -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.