The default Twenty Seventeen front page panels use featured images above main content that are 100% height of the window on full screen laptop/computer screens, and 100% height of the featured image on mobile phones. The height of these panels can be changed.
The default 100% height front page panel image.
A reduced height front page panel image.
The height of the panel image has been reduced by 50% in this example.
Where and how to change the height of the front page panel images:
In WordPress Admin > Appearance > Edit CSS.
Enter the CSS code below.
- The first section is for a phone screen (the panel size is set to 25% of the height of the screen).
- The second section is for a computer / laptop screen (the panel size is set to 50% of the height of the screen).
The combination of 25% and 50% heights for the two different screen types creates approximately and apparently the same height images on the different height screens.
The CSS code:
/* Mobile view*/ .panel-image { /*background-position: center center;*/ /*background-repeat: no-repeat;*/ /*-webkit-background-size: cover;*/ /*background-size: cover;*/ /*position: relative;*/ height: 25vh; } /*Full screen laptop/computer screen view*/ @media screen and (min-width: 48em) { .panel-image { /*height: 100vh;*/ height: 25vh; /*max-height: 1200px;*/ } }
Leave a Reply