Twenty Seventeen Theme Customisation
Twenty Seventeen is the default 4.7 WordPress theme for 2017. Register for and request customisations here.

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

Updated: July 1, 2017 Posted: December 13, 2016~ 3,136 Readers ~ 1 Minute Read 17 Comments >>

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:

Get instant access to this customisation, and more.

Join the member's area for free and receive your login by email for:

Twenty Seventeen theme customisations.
Salient theme customisations.
Other WordPress customisations.
Grow A Business Online forums.

Free membership for customisation and growing a business online is only available for a limited period.

Not a member?.. Register for free below.

Your login will be emailed to the address you enter above.
Your privacy is respected, and there is no spam.

There are 17 comments to the above post [Read comments].
Click here to comment, ask or share something.


  • supereasy01 says:

    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!

  • Phil says:

    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.


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

  • Hi!
    I have just tried the CSS code and it´s not working??

Comment, ask or share something...