WordPress.org

Make WordPress Core

Changeset 39485


Ignore:
Timestamp:
12/04/16 19:23:20 (9 months ago)
Author:
helen
Message:

Twenty Seventeen: Improve display of video header and header image in modern browsers

The theme uses a hack to help the video header and header image fill the available space. This centers around max-width: 1000%;. It causes visual issues (zooming of the header video or image) for all users though.

This fixes that with CSS Features Queries. The hack remains for browsers that don't support Feature Queries and object-fit. Browsers that do support both get a better experience with a more reliable styling of the video and image header container.

Props laurelfulford, peterwilsoncc.

Fixes #39035 for the 4.7 branch.

Location:
branches/4.7
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • branches/4.7

  • branches/4.7/src/wp-content/themes/twentyseventeen/style.css

    r39484 r39485  
    16911691} 
    16921692 
     1693/* For browsers that support 'object-fit' */ 
     1694@supports ( object-fit: cover ) { 
     1695    .has-header-image .custom-header-media img, 
     1696    .has-header-video .custom-header-media video, 
     1697    .has-header-video .custom-header-media iframe { 
     1698        height: 100%; 
     1699        left: 0; 
     1700        -o-object-fit: cover; 
     1701        object-fit: cover; 
     1702        top: 0; 
     1703        -ms-transform: none; 
     1704        -moz-transform: none; 
     1705        -webkit-transform: none; 
     1706        transform: none; 
     1707        width: 100%; 
     1708    } 
     1709} 
     1710 
    16931711.wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */ 
    16941712    background-color: rgba(34, 34, 34, 0.5); 
Note: See TracChangeset for help on using the changeset viewer.