How To Reduce The Height Of Single Post And Page Featured Images In The Twenty Seventeen Theme

Posted on 13 December 2016 in Twenty Seventeen Theme Customisation
Comments: 17

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;
}
Share this:

Tags


Comment, ask or share something...

  1. I have used the code and it works as designed. I am having an issue determining the actual size of a custom header image I would like to use. How exactly would I accomplish this, i,e, changing % to a fixed dimension. Also, if I may, is it possible to have the header image be the same size on front page and posts? thank you for this great site!

    Reply

  2. Thanks for the queries and the solutions/comments so far. Can you please help me to understand then implement a change to Featured Image Height. The Front Page/static page is set with a height which fits the main landing page banner image. I have four subsidiarity pages/panels to put Featured Images onto to achieve the parallax function and there will be a separate height for each of these four images.

    I understand by "I put the CSS code into WP-ADMIN > Apariencia > Personalizar > CSS adicional ..." in a reply to Esther that this was not entered into Customizer > Additional CSS. I expect this will affect all headers in all front page panels. Does this mean all images must carry the same height attribute?

    To get maximum effect and flexibility I would hope to chop n change Featured Images from time to time. A universal image height may restrict that.

    Thanks
    Phil

    Reply

    1. Hello Phil,
      The area at WP-ADMIN > Apariencia > Personalizar > CSS adicional is the same as the area at Customizer > Additional CSS. The former is written in Spanish as the site I was referring to had a Spanish WordPress installation, and yes the code at https://www.karavadra.net/reduce-size-front-page-panels-twenty-seventeen-theme/ will affect all the headers on the front page.
      Without knowing how each chop and change of a panel image should appear for each panel and it's size, the code cannot be written. The images are also scaled so that they effectively fill the viewable area of the browser whilst keeping the image proportions so that the image does not get squashed or stretched.
      With these many qualities of the panel images, customizing the appearance of each one every time a panel image is resized, how it should appear, and what the panel height should be, could require a lot of management than it may be worth, and the coding to create this could be quite complex. However, you know your priorities, but it is not something that I can look into at the moment.

      Reply

    1. Hello Esther, I just tried it again and it works. If you are still cannot get it to work then please use the Ask For Help link at the bottom of the page and send me the login URL, username and password for your WordPress installation and I can look into it for you.

      Reply

          1. Just realised what´s been happening.
            I misunderstood the whole thing. I though you were referring to the front page in this post, but now I see that the changes are taking place... in the individual pages.
            Sorry for the misunderstanding... really!
            I thought the instructiones were for the front page...
            Thanks a lot anyway!

            Reply

              1. Yes, I know. I had seen your post earlier this morning (i´m ahead of you, Madrid). But it´s precisely the rest of the images that I wanted to reduce. But honestly, you´ve done enough. I don´t want to drive you crazy. It was just a test drive of the theme. Which, by the way, the more i dig into it, the more i dislike it... :(
                Thank you thank you!
                Esther

                Reply

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Do NOT follow this link or you will be banned from the site!