Getting that header image sized right

Got a short and sweet edit to get the pesky featured images from dominating the page’s top portion.  Edit the CSS styling that calls out “single-featured-image-header”

And add
height: 250px; /* In my case I wanted it only this high ymmv */
object-fit: cover;

Save and reload the page for the effects to take place.  If you don’t feel like fooling with directly editing the CSS files you can just as easily add these changes by going to “Customize” > Additional CSS > add those lines of code > Publish.  I’ve noticed a useful benefit from going this route is that the site will autodate even before publishing so you will get a pretty good idea on how it’ll look.

I should note that by using the object-fit: cover option the featured image will scale within the defined section.  This means it’ll zoom out or in depending on the available resolution of the browser’s width.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.