Jump to content

Five: Changing banner height on different pages

Recommended Posts

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

Link to comment
  • 2 weeks later...
  • Replies 14
  • Created
  • Last Reply

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.

Link to comment
  • 10 months later...

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.

Link to comment
  • 1 year later...
  • 1 month later...
  • 6 months later...
  • 2 months later...
  • 2 months later...

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.

Link to comment

OK, actually it did work with this code:


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

Link to comment


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.