Jump to content

Set banner section to 100vh

Recommended Posts

I'm using the Bedford template and trying to figure out how to set the banner section to 100 vh so it fills the entire screen. I've tried some code I've found on here, but can't seem to get it to work - I don't think I understand what the name of that section is (I have the finder plugin but it calls it a collection)? Thanks for any ideas.

Link to comment
  • Replies 19
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

6 hours ago, MasonCreative said:

I'm using the Bedford template and trying to figure out how to set the banner section to 100 vh so it fills the entire screen. I've tried some code I've found on here, but can't seem to get it to work - I don't think I understand what the name of that section is (I have the finder plugin but it calls it a collection)? Thanks for any ideas.

Can you share your website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
1 minute ago, MasonCreative said:

it's unpublished and I'm unsure how I would share that

My post, How to Post a Forum Question provides guidance on how to provide a link to an unpublished site.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
19 hours ago, MasonCreative said:

 I don't think I understand what the name of that section is (I have the finder plugin but it calls it a collection)? Thanks for any ideas.

You need the one that's called section ID from the ID Finder Or please see @paul2009 's post above for how to share your website url. 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
2 hours ago, paul2009 said:

My post, How to Post a Forum Question provides guidance on how to provide a link to an unpublished site.

Thanks, but I still don't understand -- to clarify, I currently have a live site based on a template, and I'm re-building the site via a new template (using the 'preview' function)... it seems to me that if I apply a password to the site, it would apply to the live site, right? thx!

Link to comment
1 hour ago, melody495 said:

You need the one that's called section ID from the ID Finder Or please see @paul2009 's post above for how to share your website url. 

Thanks, working out how to share the URL. When I use ID finder, it only gives me a collection ID at the top where the banner is, so I have a code that looks like this but it isn't working:
 

#collection-6579abe8eb3505138ea56434 {
height: 100vh !important;
}


 

Link to comment
2 hours ago, MasonCreative said:

I currently have a live site based on a template, and I'm re-building the site via a new template (using the 'preview' function)... it seems to me that if I apply a password to the site, it would apply to the live site, right? thx!

Sounds like you have two sites. One is live, one is the one you are building. Set a password to the one you are building with the instructions from paul.

 

2 hours ago, MasonCreative said:

When I use ID finder, it only gives me a collection ID at the top where the banner is, so I have a code that looks like this but it isn't working:
 

#collection-6579abe8eb3505138ea56434 {
height: 100vh !important;
}

 

Do you only have 1 section on that page? If so, you can add page-section to your code. 

Try and let me know how it goes.

#collection-6579abe8eb3505138ea56434 .page-section {

height: 100vh !important;

}

 

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
20 hours ago, melody495 said:

Sounds like you have two sites. One is live, one is the one you are building. Set a password to the one you are building with the instructions from paul.

 

Do you only have 1 section on that page? If so, you can add page-section to your code. 

Try and let me know how it goes.

#collection-6579abe8eb3505138ea56434 .page-section {

height: 100vh !important;

}

 

Thanks again,

Regarding the password... I still don't quite understand, because the password seems to apply site-wide and not to an individual theme (i.e. the new theme I'm using to re-build the site). So, wouldn't it make it where current users of the live site would need to enter a password? Certainly don't want that, but maybe I'm missing something? 

As for the code, it didn't seem to work... attaching a screenshot of what I have so far, trying to get the banner area above the logo scroll to default to 100 vh.

home.thumb.png.67c637d746d8a2cf394db4a3d3cff4ab.png

Link to comment
2 minutes ago, MasonCreative said:

Regarding the password... I still don't quite understand, because the password seems to apply site-wide and not to an individual theme (i.e. the new theme I'm using to re-build the site). So, wouldn't it make it where current users of the live site would need to enter a password? Certainly don't want that, but maybe I'm missing something? 

Go to accounts.squarespace, do you see 2 sites? 1 for your live site, and 1 for the one you are currently working on?

3 minutes ago, MasonCreative said:

As for the code, it didn't seem to work... attaching a screenshot of what I have so far, trying to get the banner area above the logo scroll to default to 100 vh.

 

The code doesn't work because it looks like you only have 1 section? Ideally you should have the hero banner as 1 section, then I would have the logo as a different section, then Our Approach a different section etc. 

We would need a link to your website to really see what's going on and help you. It is really hard without, hence just guessing with code that should work based on the information you have provided. 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
14 minutes ago, melody495 said:

Go to accounts.squarespace, do you see 2 sites? 1 for your live site, and 1 for the one you are currently working on?

Thanks again, I will add a section and see what happens. To clarify, I am using the 'starting over' method outlined by Squarespace here (option 1 in 7.0). I am not creating a new site, only switching templates, with this method - so I still don't see how I could password protect and/or share the template I am working on without affecting the live site. 

https://support.squarespace.com/hc/en-us/articles/205815378-Starting-over?platform=v6&websiteId=606b7f0d50868d69372d1aed

Link to comment
3 hours ago, melody495 said:

The code doesn't work because it looks like you only have 1 section? Ideally you should have the hero banner as 1 section, then I would have the logo as a different section, then Our Approach a different section etc. 

Maybe the problem is that I'm starting from the home page in the template (doesn't seem to be any options for adding sections) -- maybe I should make the homepage from an index page instead? 

Link to comment
22 hours ago, MasonCreative said:

Think I finally figured it out 🙂
curalinc.com/landing-bedford

Pass: Astro1965

Thanks for sharing. I am not familiar with that template, nor more generally 7.0 templates to be honest. But maybe there is a 7.0 template that provides this functionality that you are looking, that you can try?

The template is setting the banner to work that way you see with a bunch of different settings, we could use code to set it o 100% viewport , but without more a thorough look, I don't feel comfortable that it doesn't affect other things.

Either see if another SquareSpace user responds to you, or I suggest posting another forum question with your template name in the title. e.g. Bedford 7.0 - set banner  section to 100vh.

Sorry couldn't help more!

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
1 minute ago, melody495 said:

Thanks for sharing. I am not familiar with that template, nor more generally 7.0 templates to be honest. But maybe there is a 7.0 template that provides this functionality that you are looking, that you can try?

The template is setting the banner to work that way you see with a bunch of different settings, we could use code to set it o 100% viewport , but without more a thorough look, I don't feel comfortable that it doesn't affect other things.

Either see if another SquareSpace user responds to you, or I suggest posting another forum question with your template name in the title. e.g. Bedford 7.0 - set banner  section to 100vh.

Sorry couldn't help more!

Thanks, the very first line of my post says I'm using Bedford.

Link to comment
Just now, MasonCreative said:

Thanks, the very first line of my post says I'm using Bedford.

Update your post title to include that. The clearer you make a post, the easier other users can help! As we are all just volunteering our time on the forum to help each other out.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
32 minutes ago, MasonCreative said:

Thanks, the very first line of my post says I'm using Bedford.

@MasonCreative although you previewing a Bedford template, your public site is currently using a Brine-family template 🙂.

This is because, as you mentioned above, you are currently previewing a different template, which isn't visible to the public. For this reason, we can't view with the "Bedford version" of your site until you've completed the switch. Here's what we see:

image.thumb.png.4306d87b25983e1fb6eca5cf6d7a6a6e.png

That said, Bedford is older than the Brine-family templates and so is much more restrictive that your current template, and has fewer features. If it helps, I'd personally recommend using a Brine-family template or moving to version 7.1.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Thanks @paul2009 that helps. There is some hesitation internally to switch to 7.1, so I am stuck in 7.0. If it were possible, I would use the same template we're on now for the re-build, but of course I can't do that. I was under the impression that Bedford was in the Brine family, but looks like it's not so I may try to switch here. 

As for asking questions about the template I am working on that is not public... how can I go about asking questions? Should I just post a link to the template family and ask the question that way? Seems strange that there is no way to share something you are working on ahead of roll-out, right?

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.