Adjust the banner image spacing on a Bedford home page

On the home page of my site, https://www.herocards.us/, I'd like to reduce the padding slightly between the navigation and title, and also the buttons and bottom edge (shown in red). Ideally, I'd like to do this on the home page only, as other pages seem fine. The background is a looping video.

There are a lot of Forum CSS solutions for gallery pages and other similar situations. But I can't seem to find anything for adjusting this spacing on a Bedford template Home page.

Can anyone help me with this CSS coding?

Try this Custom CSS:

#collection-61621b4cde18954468c81b0c {
  .transparent-header.collection-type-page .banner-thumbnail-wrapper {
    padding: 100px 0 50px;
  }
}

The 100px is the top padding, the 50px is the bottom padding.

Thanks for the fast response, Ziggy! I tried that solution, but there's no change.

59 minutes ago, Ziggy said:

Can you try this:

#collection-61621b4cde18954468c81b0c {
  .transparent-header.collection-type-page .banner-thumbnail-wrapper {
    padding: 100px 0 50px !important;
  }
}

and if that doesn't work then this:

.transparent-header.collection-type-page .banner-thumbnail-wrapper {
  padding: 100px 0 50px !important;
}

 

The first option had no effect, but the second one did the trick! It impacts all pages, rather than just the main page. Not ideal, but much preferable to pushing page content off the screen on my main page! Thanks so much, Ziggy!

You could always put the code into the home page header code injection within <style></style> tags to just target the one page.