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

Bedford: Can I resize the banner?


dnesci
Go to solution Solved by gzhang,

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.

Link to post
  • Answers 23
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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.

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}

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.

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.

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.

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?

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.

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?

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

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

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!

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!

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!

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?

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

×
×
  • Create New...