Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
SugartoothTours

Code to fix banner in Bedford template

Question

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!

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 1

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.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0
Posted (edited)
.#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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...