@sfreeman422 – You can do a couple of things:
– Custom CSS: a few plugins give you that feature, including Jetpack – just don’t overwrite the theme itself as you’ll lose it when the theme gets updated.
– Child Theme: You can make a child theme with your changes, to guarantee nothing gets overwritten.
Whatever option you chose, you can change properties on the featured image container in a single post by targeting selector .single.featured-image .site-header-image. Then you can either change the height of that container (it’s 100vh by default, you can make it 50vh to be half of the viewport height), or simply make it display: none; if you want it hidden.
If you go the child theme route, you could even completely change the header.php template to hide the image completely on single posts.
Hope this helps!
Hi Hugo,
How would we co about changing the VH to being 50%. We don’t like how the featured image takes up the entire screen onload.
Here is the CSS we applied to jetpack plugin, and it is not making a change
.single.featured-image, .site-header-image. {
height: 50vh;
width: auto;
}
Please let us know what we are doing wrong thus far.
