sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
David A. Kennedy 2016-11-03 19:43:15 +00:00
parent 4bdbfc4526
commit 9dd2063876
2 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/wp-content/themes/twentyseventeen/assets/css/ie8.css
View File

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

22
src/wp-content/themes/twentyseventeen/style.css
View File

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