Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
dnesci

Bedford: Can I resize the banner?

Question

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.

Edited by Testing2134
retag

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.

Share this post


Link to post

23 answers to this question

Recommended Posts

  • 6

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.

Share this post


Link to post
  • 1
Guest

@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}

Share this post


Link to post
  • 0

beautiful. thank you very much.


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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

keinocycles: is your banner fixed, or transparent?


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.

Share this post


Link to post
  • 0

This works great, but not so much for mobile (depending on the size you pick I'm sure). Is there a way to have the mobile rendering of the site ignore this code and behave how it normally would?

Share this post


Link to post
  • 0

@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.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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;
}

Edited by Guidum80

Share this post


Link to post
  • 0
Guest

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.

Share this post


Link to post
  • 0

This doesn't seem to work if the first element on the page is an image gallery, which is what is necessary to have a carousel on the page.

Here is the link to the how-to on creating the carousel: http://answers.squarespace.com/questions/42720/make-heromarquee-image-a-carousel-in-bedford-template

Any CSS that will work in this case to shrink the banner image size?

Thanks!

Edited by dwhaite

Share this post


Link to post
  • 0

Yes Please! I also use a non transparent banner and have issues with this. I've used the adding line breaks trick to the page description but I've realized the image size is then drastically different on different computers.

Share this post


Link to post
  • 0

The CSS code above does not appear to work for fixed banners in the Bedford template. Does the code above need to be tweaked to work for fixed banners? This has been a challenging one to fix...any help would be greatly appreciated!

Share this post


Link to post
  • 0
Guest

Has anyone figured out a solution for shrinking the banner height with fixed banners? I would be SO grateful! Thanks!

Share this post


Link to post
  • 0
Guest

Has anyone figured out a solution for shrinking the banner height with fixed banners? I would be SO grateful! Thanks!

Share this post


Link to post
  • 0

The best solution I found (and I'm not a coder) is that the amount of text you put over the banner is what drives its height. When I reduced the lines of text, the banner got shorter. Maybe that can help you, too?

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...