Bedford: Decrease the homepage's banner height

I'd really like to reduce the Bedford template's homepage's banner height, while retaining its headline functions, and keeping the site mobile-friendly. I know a little html and css, but am not a developer; I've tried some "code injection" tips from the forum about increasing the banner size, but have not been able to get anything working. Any advice?

As background, I'm working with a client who really likes this template. Her site is pretty simple, so we are using copies of the homepage-style template for every page in the site. She doesn't have a lot of content in the banner area though, and I feel that the banner takes up too much screen space, pushing the subsequent content too far down the page.

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

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.

Worked like a charm, thank you so much!

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>

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?