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

Share this:

Subscribe for updates

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





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

  1. Paige Slaughter avatar

    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?

    1. Bharat Karavadra avatar

      Hello Paige,
      Can you send me the admin URL, username and password? Use the Ask for Help link on the top menu.

  2. Chadwick Gendron avatar

    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?

    1. Bharat Karavadra avatar

      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.

  3. Niko avatar

    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.

  4. Janice Strong avatar

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

    1. Bharat Karavadra avatar

      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.

Leave a Reply

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