WordPress.org

Make WordPress Core

Changeset 39124


Ignore:
Timestamp:
11/03/2016 07:43:15 PM (5 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/assets/css/ie8.css

    r39072 r39124  
    6161}
    6262
     63.has-header-image.twentyseventeen-front-page .custom-header,
     64.has-header-image.home.blog .custom-header {
     65    display: block;
     66}
     67
    6368.custom-header-image {
    6469    background-position: bottom center;
     
    6772.site-branding {
    6873    padding: 45px 0;
     74}
     75
     76.has-header-image.twentyseventeen-front-page .site-branding,
     77.has-header-image.home.blog .site-branding {
     78    bottom: 0;
     79    display: block;
     80    left: 0;
     81    height: auto;
     82    padding-top: 0;
     83    position: absolute;
     84    width: 100%;
    6985}
    7086
     
    194210/* RTL Styles */
    195211
     212.rtl .has-header-image.twentyseventeen-front-page .site-branding,
     213.rtl .has-header-image.home.blog .site-branding {
     214    left: auto;
     215    right: 0;
     216}
     217
    196218.rtl .entry-footer .cat-links,
    197219.rtl .entry-footer .tags-links {
  • trunk/src/wp-content/themes/twentyseventeen/style.css

    r39080 r39124  
    15431543    background-color: #fafafa;
    15441544    position: relative;
     1545    overflow: hidden;
    15451546}
    15461547
     
    15641565.site-branding a:focus {
    15651566    opacity: 0.7;
    1566 }
    1567 
    1568 .has-header-image.twentyseventeen-front-page .site-branding,
    1569 .has-header-image.home.blog .site-branding {
    1570     align-self: flex-end;
    15711567}
    15721568
     
    16401636.has-header-image.twentyseventeen-front-page .custom-header,
    16411637.has-header-image.home.blog .custom-header {
    1642     display: flex;
     1638    display: table;
     1639    height: 100%;
    16431640    min-height: 300px;
    16441641    min-height: 75vh;
     1642    width: 100%;
    16451643}
    16461644
     
    17011699body:not(.has-header-image) .custom-header-image {
    17021700    padding: 5% 0;
     1701}
     1702
     1703.has-header-image.twentyseventeen-front-page .site-branding,
     1704.has-header-image.home.blog .site-branding {
     1705    display: table-cell;
     1706    height: 100%;
     1707    vertical-align: bottom;
    17031708}
    17041709
     
    32423247    .has-header-image.home.blog .site-branding {
    32433248        bottom: 0;
     3249        display: block;
     3250        left: 0;
     3251        height: auto;
    32443252        padding-top: 0;
    32453253        position: absolute;
     
    32493257    .has-header-image.twentyseventeen-front-page .custom-header,
    32503258    .has-header-image.home.blog .custom-header {
     3259        display: block;
    32513260        min-height: 0;
    32523261    }
     
    35503559        max-height: 100%;
    35513560        overflow: hidden;
    3552         /* padding: 10% 0; */
    35533561    }
    35543562
Note: See TracChangeset for help on using the changeset viewer.