How to make the cover / header image smaller in WordPress 2017 theme

I just figured out yesterday how to make the cover image / header image smaller in the WordPress 2017 (Twenty Seventeen) theme, and I’ve already had a number of people ask me how!

It’s pretty simple. And you don’t need to modify the theme, or make a child theme. Simply go to Customize>Additional CSS and copy and paste the below

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header, .custom-header, .custom-header {
height: 30vh !important;

You can change that number 30vh for different heights. That’s it!

I did two more things for my blog.

First, I didn’t like the “POSTS” heading on my page, since my main page is posts, so I also added this, below the above, in the same box:
display: none !important;

And finally, I then felt the padding was a bit too much with that heading gone, so I also put this in, to remove space:
padding: 0.75em 0 0 0 !important;

Please note that with this last bit, the spacing will also change, and a bit differently, on individual post pages. I liked 0.75em best across both, and of course feel free to change that – just be sure to look at the main page and your individual post pages before finalizing!

This looks good on computers, phones, and tablets :)


RSS feed
Email list

comment and discuss