Jump to content

Bedford: Decrease the homepage's banner height

Recommended Posts

I'd really like to reduce the Bedford template's homepage's banner height, while retaining its headline functions, and keeping the site mobile-friendly. I know a little html and css, but am not a developer; I've tried some "code injection" tips from the forum about increasing the banner size, but have not been able to get anything working. Any advice?

As background, I'm working with a client who really likes this template. Her site is pretty simple, so we are using copies of the homepage-style template for every page in the site. She doesn't have a lot of content in the banner area though, and I feel that the banner takes up too much screen space, pushing the subsequent content too far down the page.

Link to comment
  • Replies 8
  • Created
  • Last Reply

Add this code snippet to the CSS Editor found inside the Style Editor to adjust the banner area padding:


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

Adjust the top padding (180px) and the bottom (155px) values to your preferred sizes.

Template Developer at Squarespace, @esquareda on Twitter.

Link to comment
  • 9 months later...

If you want this to affect only the homepage (or any other single page), add it to the Page Header Code Injection in the Advanced tab of your Page Settings, and add Style tags around the code like this:


<style>
.transparent-header.view-list .banner-thumbnail-wrapper,
.transparent-header.collection-type-page .banner-thumbnail-wrapper {
 padding: 180px 0 155px;
}
</style>

Link to comment
  • 4 months later...

This works, but how does the image size itself effect how it is displayed? Do I need to ensure the images I upload all have the same dimensions? I've got 12 different images I'm using and when displayed on my site, they range in size from 336 px - 649 px.

I'm adding

Link to comment
  • 5 months later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • 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.