Code to fix banner in Bedford template

Site URL: https://www.sugartoothtours.com

Hi there,

Does anyone have any suggestions for fixing the banner on the homepage? The banner is responsive, but I would like it to remain fixed so that it doesn't crop any of the image out. The template is Bedford and the homepage is www.sugartoothtours.com. Hoping to create a fix that would only affect the banner on the homepage. Thanks!

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

This is targeted to the banner the image is in on the home page. You can adjust the padding numbers to enlarge or shrink the banner and the image will fill the box. I am assuming your banner header is set for transparent. If it has an adverse effect just remove it and let me know. 

Thanks for the help! It didn't work, but maybe I'm doing something wrong. I added the code to custom css and it still isn't a fixed banner image. It also says there is a syntax error in line one.

It's not your fault @SugartoothTours. The code posted above isn't valid.

However, rather than trying to change the way Bedford crops the banner image, the more reliable solution would be to remove the text/graphics from the image so that the cropping isn't an issue. This will make the banner image clearer on mobile too. You can then add the review banner text and graphics as a separate item using an Image Block that won't crop.

15 hours ago, SugartoothTours said:

Thanks for the help! It didn't work, but maybe I'm doing something wrong. I added the code to custom css and it still isn't a fixed banner image. It also says there is a syntax error in line one.

Can you post all code here?