Bedford: Can I resize the banner?

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.

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

beautiful. thank you very much.

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?

added this css editor at style editor,, i dont see changes,, am missing something?

keinocycles: is your banner fixed, or transparent?

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?

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

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?

Its not responding for me either, tried it in page settings and custom css. My banner is transparent so idk what I'm doing wrong either.

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

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.

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!

Have you worked out how to decrease this carousel banner page?

Thanks,

I tried the CSS but it doesn’t seem to do anything for me. Any ideas how to decrease banner image height here: mats-vuorenjuuri.squarespace.com ?

How do you make this work for a NON-transparent banner?

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.

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!

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

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

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?

This works great, but how to center text?

Hi George. I am looking for help to increase / decrease the top banner height for each individual page in my website and also how to create a border around the text in my top banner. Please help, I do not come with a coding background. my website is - https://raj-gupta-mdb9.squarespace.com/config/