Jump to content

Code to fix banner in Bedford template

Go to solution Solved by paul2009,

Recommended Posts

.#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. 

Edited by derricksrandomviews
Link to comment
  • Solution

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.