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

November 15, 2016

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;*/
	}
}
Share this:
About Bharat Karavadra

"I research and share leading-edge information, tools and exercises to help people transform and heal their life situations."

Share your thoughts

Your email address will not be published. Required fields are marked

  1. I tried both css codes with no change. I’m trying to change the image so it’s more of a banner but it still shows as a big picture. My picture is wide and short but it still insists on zooming into a middle area of it and displaying it as a big picture. What am I doing wrong?

  2. Hi Bharat,
    thanks for the code. Been looking a while for it.
    Is there a way to change / remove the shader, as it looks a bit akward. When the Image size is reduzed the shader keeps the same.
    Looking for a more elegant way.

    Thank you very much for your help.
    With regards and greetings from Vienna.
    Niko

  3. The css that I pasted in at the bottom of the file, doesn’t change anything. Is there a .panel-image somewhere else in the large css file that needs changing, or how to add that class to the html? .

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Bharat Karavadra