The default Twenty Seventeen post and page featured images appear quite large in height especially on a laptop or computer screen. The height of these featured images can be reduced in size.

The default height of single post and page featured images.

A reduced height single post and page featured image.

The height of the featured image in this example has been reduced in size to 33% of the height of the screen.

Where and how to change the height of single post and page featured images:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below.

  • The 33vh height sets the size of the images to 33 percent of the height of the screen.
  • The object-fit line ensures that the image retains it's original proportions and is cropped to fit the shape of the featured image bounding rectangle.

The CSS code:

.single-featured-image-header img {
	/* display: block; */
	/* margin: auto; */
	height: 33vh;
	object-fit: cover;
}
Bharat Karavadra

About Bharat Karavadra

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

17 Comments

Comment, ask or share something...

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