Skip to main content

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:
  • 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? .

  • Niko says:

    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

  • 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?

  • Thanks so much for this! I don’t know what I’m doing wrong, but I’ve entered the CSS and it doesn’t seem to reduce the header image height… Can you help?

  • >