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

About Bharat Karavadra

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

8 Comments

Comment, ask or share something...

Do NOT follow this link or you will be banned from the site!