Bedford: Decrease the homepage's banner height

Add this code snippet to the CSS Editor found inside the Style Editor to adjust the banner area padding:

.transparent-header.view-list .banner-thumbnail-wrapper,
.transparent-header.collection-type-page .banner-thumbnail-wrapper {
 padding: 180px 0 155px;
}

Adjust the top padding (180px) and the bottom (155px) values to your preferred sizes.

If you want this to affect only the homepage (or any other single page), add it to the Page Header Code Injection in the Advanced tab of your Page Settings, and add Style tags around the code like this:

<style>
.transparent-header.view-list .banner-thumbnail-wrapper,
.transparent-header.collection-type-page .banner-thumbnail-wrapper {
 padding: 180px 0 155px;
}
</style>

Consider posting a link to your site so people in the community can help. The banner area size is controlled in a few different ways, depending on the content.

Thanks for the tip! It's drlifaustino.com

Worked like a charm, thank you so much!

This works, but how does the image size itself effect how it is displayed? Do I need to ensure the images I upload all have the same dimensions? I've got 12 different images I'm using and when displayed on my site, they range in size from 336 px - 649 px.

I'm adding

Perfect! What about individual blog posts?

When I test this in Mobile, it does not seem to make a difference there. Is there any way I can shrink the height in Mobile mode as well?