Jump to content

Bryant: How do I change the banner height ?

Recommended Posts

  • 4 weeks later...
  • Replies 5
  • Views 20.7k
  • Created
  • Last Reply
  • 3 weeks later...

You can adjust the banner to a specific height, or change the padding to reduce/increase the height.


.banner-thumbnail-wrapper {
   padding: 80px 0px;

.collection-type-page .banner-thumbnail-wrapper {
   padding: 150px 0px;

.collection-type-index .banner-thumbnail-wrapper {
   min-height: 20px;
   max-height: 75px;

Hope this helps

Link to comment
  • 8 months later...

I found a way that has worked for me using a little bit of custom CSS.

You'll want to enter this code into custom CSS on the design tab:

.view-list.transparent-header .banner-thumbnail-wrapper, .collection-type-page.transparent-header .banner-thumbnail-wrapper, .collection-type-blog.view-item.transparent-header .banner-thumbnail-wrapper {
padding:60px 0px 20px;


You can then change the '60px and 20px' to whatever you want, the middle value will move the page title left or right

So far it seems to work fine on all pages too.Hope this helps answer your question!

Link to comment
  • 1 year later...
  • 1 month later...


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.