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

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.

Posted

November 15, 2016

Blog Posts

Bharat Karavadra

Tags:

twentyseventeen, wordpress

Comments

8 responses to “How To Reduce The Size Of Front Page Panels In The Twenty Seventeen Theme”

Paige Slaughter

February 15, 2017

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?

Reply
1. Bharat Karavadra
  
  February 16, 2017
  
  Hello Paige,
  Can you send me the admin URL, username and password? Use the Ask for Help link on the top menu.
  
  Reply
Chadwick Gendron

February 11, 2017

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?

Reply
1. Bharat Karavadra
  
  February 11, 2017
  
  Hello Chadwick,
  Can you use the ask fro help link on the top menu to send me your admin URL, username and password so that I can look into it.
  
  Reply
Niko

January 19, 2017

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

Reply
1. Bharat Karavadra
  
  January 24, 2017
  
  Hello Niko,
  To change or remove the front panel gradient, see here https://karavadra.net/change-front-page-panel-shaded-gradient-twenty-seventeen/
  
  Reply
Janice Strong

January 9, 2017

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

Reply
1. Bharat Karavadra
  
  January 9, 2017
  
  Hello Janice,
  In WP-ADMIN, go to Appearance > Customise > Additional CSS and paste the code into the numbered box that appears and then click on “Save & Publish” at the top.
  
  Reply