implicit art

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,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .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:


h2.page-title
{
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:


h2.page-title
.site-content
{
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 :)

Enjoy!