Jump to content

Bedford: Can I resize the banner?

Recommended Posts

I am looking to change the banner size on the Bedford template. my site is http://spearhead.to

I have tried:

.desc-wrapper { height: 300px !important }

This code brings the bottom of the banner up, however, the header content does not align to the centre of the banner.

I am a Toronto realtor and owner operator of Spearhead Property Management Ltd. I am a partner in a few other companies in printing, restaurant and software industries.

Link to comment
  • Replies 23
  • Views 55.3k
  • Created
  • Last Reply

The height of what we call the Page Banner (i.e. a banner created by uploading a thumbnail image to a page or blog list, event list, or product list, and editing the page description) is determined by padding. You can change it here (edit 180px and 155px to whatever you want):


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

To make the content appear vertically centered with the transparent header, the top and bottom padding are not exactly the same, so you'll have to eyeball it a little.

Link to comment

I have chosen to go with a fixed header. However I find that the bsnner image is cut off at the top. Is there a way to adjust that?

I am a Toronto realtor and owner operator of Spearhead Property Management Ltd. I am a partner in a few other companies in printing, restaurant and software industries.

Link to comment

@NeilaDot – The mobile padding is set separately using a max-device-height @media query. Since that selector would be more specific than the code I provided, it would override any padding you set above. You may not see it as such on desktop since the @media query uses device-height, but if you look on your phone you should see it.

Link to comment
  • 3 weeks later...

I am really struggling to get this to work. Am I doing something wrong?

I am trying to paste this into custom CSS, but it's not responding.


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

Any help?

Link to comment
  • 2 weeks later...

It’s because you need to declare the #collection-id in front of the suggested CSS.So it becomes:


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

Link to comment

How did you have one fixed size of the banner on your homepage AND info pages but a shorter one for services and requests? When I input the coding, it changes the banner height for all pages.

Link to comment
  • 1 month later...
  • 10 months later...
  • 2 weeks later...
  • 1 month later...
  • 4 months later...
  • 4 weeks later...
  • 2 weeks later...
  • 4 months later...

@sproutedstudio try this out..

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper {min-height: px;height: px;width: 1100px;padding: 5px 0 !important

}

.banner-thumbnail-wrapper{height: 500px}

Link to comment
  • 11 months later...
  • 2 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.