How To Reduce The Size Of Front Page Panels In The Twenty Seventeen Theme

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;*/
}
}

Originally published at Bharat Karavadra.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.