Five: Does anyone have CSS to override the homepage header size?

I am using a FIVE template but I would like to be able to have variable header sizes by the page. I am currently using the page thumbnail as the header, I would like the home page to be a large header but take the other pages down to like 50% of the home page banner size. PLEASE HELP!

Sure, you can do it a couple ways. You can specify on a page-per-page basis by adding this to your(s) 'Page Settings' > 'Advanced' > 'Page Header Code Injection'

<style>
    #banner-area-wrapper { height: 200px; }
</style>

But if you want the same sized banner for all pages except the homepage, I would probably do it this way instead -- go to the 'Style Editor' and set the 'Banner Area Height' to the height you want for the rest of your pages, and then go to the homepage and go 'Page Settings' > 'Advanced' > 'Page Header Code Injection' and add this custom CSS:

     <style>
        #banner-area-wrapper { height: 500px; }
   </style>

Using this technique, you will have consistent banners for all pages (and newly created pages) and a custom one for just the homepage.

@Kale This didn't work for me. I'm not too sure why

@Toe which template are you using? FIVE?

@Kale Thanks for your response. I'm using Dovetail. It has a banner area, is it still different?

@Toe if you can post a link to your site, I can probably give you the CSS -- first, though, check in the 'Style Editor' -- sometimes those options are there. If not, and you can post a link, I should be able to give you the CSS.

@Kale CleoThreads.com. I can edit the universal banner size via the Style Editor, however I'm trying to make an exception with one particular 'collection' or page so its banner height is significantly smaller.

@Toe Try adding this CSS to your custom CSS section:

#collection-52017e88e4b0e6816c1cd75a #hero .page-image { min-height: 200px; }

That will change the height of your banner image on the 'Contact Us' page (not sure if that's the one you're wanting to alter but I used it to figure it out).

If its for a different page, and you don't know how to get the collection ID, just post back, or alternatively, you can apply this to a single page by going to the 'Page Settings' > 'Advanced' > 'Page Header Code Injection' and pasting this (including style tags)

<style>
    #hero .page-image { min-height: 200px; }
</style>

@Kale Thank you! This worked perfectly.

I'm not sure what the '#hero' is? I'm not too familiar with CSS but I've made minor edits to pages with collection ID's.

Also, why wouldn't { height: } work? What's the 'min-height' offer?

The #hero is just the name of the element that whoever designed the template chose. A hero image is a common print / design term for the top main image on a page (I believe). This could have been named #banner or #banner-wrapper or something but they chose hero (which is why the original code didn't work).

I believe the min-height offers the ability to grow beyond the value set. In other words, something with min-height says "I must be 'this' high, but I can be taller if space allows" -- vs -- height, which is a more definite value (not positive on this, though).

@Kale, do you know if this is the same for the Adirondack template? I tried some of the code above in css and in the settings -> advanced with no luck on setting a different banner image height for different pages.

@physicswoman I think this is the CSS you'll need for Adirondack template:

.main-image-wrapper .main-image { height: 200px; }

@john_mtthws adding this snippet of code to the custom CSS Editor found within Style Editor will let you select the default banner area size for all pages with the Style Editor, but override it only for the homepage. Just adjust the padding top and bottom to the value you like best.

.homepage #banner-area {
 padding-top: 192px;
 padding-bottom: 192px;
}

how can you do this on Flatiron?

@kale thank you for your help! I had to add a bit of code to make it work..

.main-image-wrapper { height: 200px; } .main-image-wrapper .main-image { height: 200px; }

However this does not work for mobile. Setting the height of these images appears to resize the images beyond the device width. Any suggestions for how to deal with mobile?

@kale This worked for me for a little while and then the code started appearing as text in the header.

any help would be appreciated!

https://villavisions.squarespace.com/home-2

@kale This worked for me for a little while and then the code started appearing as text in the header.

any help would be appreciated!

https://villavisions.squarespace.com/home-2

kale,you seem to have all the answers for this!!! could you help me with the same thing on a store page in Horizon? I want to make the header (or banner image as it is called in this template) padding only 150 pixels for this one page and leave it as 300px for all the others. I have tried pretty much all the ccs from this feed to no result. help plz!

Hi @kale , I think I have the same question but for the Heights template. My site is https://heirloom-3.squarespace.com/, and the password is 2018. Thanks!

Could someone advise on how to adjust the positioning of the text overlayed on the banner for a specific page only - in combo with the shorter banner height?

banner height adjustment is working using above code

Hi @heirloom, did you ever find an answer to this? I've just looked at your site (nice by the way;) and it looks like you did. Are you able to let me know how you did it? Many thanks!

@kale Hey there! Do you know how to do this in the Brine template family - specifically for Marta? Here's my website: https://wedge-drum-dlse.squarespace.com/ password is atlantic21

I just want to make the home page banner a different height without affecting anything else on my site. Thank you so much!