Hello,I am trying to find the correct CSS code to add to a given page to adjust the banner height on my site which uses the template, Five. In the default template, the banner height is universal across all pages, so my goal is to have the banner taller on the homepage and shorter on all other pages. Any help with this adjustment would be greatly appreciated. Thanks very much!Regards,LICNYGUY

I was able to do this.

1. Find the collection number of the page where you want the banner image to be different. You can do this by using the Developer Tools (right click > Inspect Element) in Chrome or Safari or using Firebug.
2. Then in the Custom CSS Editor paste this:

#collection-5514f7b4e4b00e32840e1ed4 #banner-area-wrapper { height: 100px }

You can change the height to whatever height you need.

Hey Tony! Thanks a lot for the assist. Just to double check, could you take a look at the screen shot below to see if I have the collection# and CSS correct? Thanks again! J-

Yes, that should be it. Hope it works!

I am trying to adjust the banners on different pages of my site to be different heights as well, but I’m using the Adirondack template. Is it possible that this same code should work on another template? I ask, because I’m trying and it’s not working.

Or, is it likely that #banner-area-wrapper is called something totally different on Adirondack?

Also, that code gets injected in the CSS box for the whole site, not on an individual page’s “page header code injection” box, correct?

I’ve been trying so solve this problem on my site for looong time, and I feel like I’m so close, thank you.

You can also change this on a per page basis by adding the code (You can change the height in pixels as is needed) in the page settings > Header Code Injection area like so:

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

Hi Guys,

Am I the only one experiencing an issue with the text overlay in the banner on the Five template if I resize the banner (screenshot attached) - The text is completely off center then

Any ideas?

Hi Guys,

Am I the only one experiencing an issue with the text overlay in the banner on the Five template if I resize the banner (screenshot attached) - The text is completely off center then

Any ideas?

Also trying to do this with the Pacific template. Anyone figure it out?

After using the above code (Embee) it keeps my text in the same area but the size was adjusted perfectly. Any idea how to fix?!

Nevermind I figured it out! haha Thank you!

Hey I'm running into the same issue as you, how did you figure out the text bit?

Doesn't work for me neither in CSS sheet with the page ID, neither in ADVANCED for an individual page.

It's beyond me why wouldn't Squarespace implement such a basic thing in settings (as well as many other basic design tuning possibilities).. Unfortunately I am tied to this rigid platform.

OK, actually it did work with this code:

collection-58c2f5709de4bbceb9263de1

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper {max-height: 1px;}

However, it only ADDS to the banner, not takes it away. It's still huge and I cannot get it any more narrow than it already was. Besides, it stopped working again on a reload.

I'd also love to know how to fix the text's vertical alignment in the banner. I'm not having any luck.