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;
}
Leave a Reply