Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
jealevy

Bedford: Decrease the homepage's banner height

Question

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.

Edited by emca
retag

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 9

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.

Share this post


Link to post
  • 1

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>

Share this post


Link to post
  • 0

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

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...