Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 12

Bedford: Changing the banner height?

Go to solution Solved by foleyatwork,


I’ve been trying to change the banner/header height in the Bedford template by inserting this in the CSS editor but it’s not yielding any results.

#collection-xxxxx #banner-thumbnail-wrapper { height: 50px; }

Does anyone have any suggestions on what else can be done? I would also like to be able to edit the height of the banner when it’s a slideshow.


Edited by ccbjan
Fix title
Link to post
  • Answers 98
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

I wanted to shrink the size of the banner; adding this to custom CSS worked fine: .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail

This javascript snippet should make all the hero images and galleries in Bedford take up the full window height. Just drop this in the footer code injection. Can't stress that footer part enough, the

Posted Images

Recommended Posts

  • 0

The solution from foleyatwork stopped working for us recently due to some changes in squarespace. I had to update the code to also set the max-height property.I also had to add some CSS to properly re-scale images. See below an updated solution. This also sets the banner width to 0.3% - adjust var windowHeight variable according to your needs...

(function () {

       To make this work on the homepage only,
       set this variable to true. Then uncomment
       the .homepage selector in the CSS below.
   var homepageOnly = false;

   if (homepageOnly === true && !Y.one('body.homepage')) {
   } else {
       var elem = Y.one('.banner-thumbnail-wrapper');
       var windowHeight = window.innerHeight * 0.3;
       if (elem && elem.getComputedStyle('display') != 'none') {
           var content = Y.one('.desc-wrapper') || Y.one('.blog-item-wrapper');
           var padding = (windowHeight - content.get('clientHeight')) / 2;
               'paddingTop' : padding,
               'paddingBottom' : padding
       } else {
           var wrapper = Y.one('#promotedGalleryWrapper .sqs-gallery-container');
           var gallery = Y.one('.sqs-featured-posts-gallery') || Y.one('#promotedGalleryWrapper .sqs-gallery');

           if (gallery) {
               gallery.setAttribute('style', 'height:' + windowHeight + 'px !important');
               gallery.setAttribute('style', 'max-height:' + windowHeight + 'px !important');
           if (wrapper) {
               wrapper.setAttribute('style', 'height:' + windowHeight + 'px !important');
               wrapper.setAttribute('style', 'max-height:' + windowHeight + 'px !important');

/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper,
/*body.homepage*/ .sqs-featured-posts-gallery .slides-controls,
/*body.homepage*/ .sqs-featured-posts-gallery .slides,
/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper .posts,
/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper .posts .post {
   height: 100% !important;

#promotedGalleryWrapper .thumb-image {
 height:auto  !important;
 max-height:100%  !important;
 position:static !important;


Link to post
  • 0

Here is the code that I used to update the banner-height for the slideshow:

.collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery, .collection-type-index.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery, .collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery, .collection-type-index.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery {
width: 100%;
height: 100% !important;
max-width: 100%;


You can change 'height' to be whatever size or ratio you would like. Hope it helps!

Link to post
  • 0

@foleyatwork your script works great; I need to resize the banner images to full-height. however, it doesn't work on all my pages. Only certain banners resized. What could I be doing wrong? Best, A

Link to post
  • 0

Hihttps://sharon-wilson-t2gb.squarespace.com/config#/pages|/ecu-remapping/ I am working on this project and want the blue banner at the top of all pages to be approx 5cm high or thereabouts. I have limited knowledge of coding but am able enough to copy and paste in to the CSS if anyone out there has the correct code please. Many thanks in advance. SJ

Link to post
  • 0

Hi @foleyatwork - this works for me on Safari, but no luck on Firefox and Chrome. Any update? Thanks :-)

Link to post
  • 0

So I tried the updated code from @kofifus and it did the key move of moving the banner slideshow all the way up to the top of the page. See before (realize there's a typo here);

alt text

And after:

alt text

However, like other users have had issues with, I can't seem to get rid of the extra space being provided for the full banner image. Would love to get that black bar of padding knocked out and make the text re-center on the thinner banner image. Any ideas? Thanks!



Link to post
  • 0

I've run into the same issue - title text, tagline and button were getting cut off. This code worked for me - it kept the text vertically centered within the banner.

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper { min-height: 0; padding: 30px 0;}

Replace 30px with the value that works best for you.

Link to post
  • 0

This worked great, but it seemed to block some of the text in mobile. How do I modify that to fix the mobile version as well? Thanks.

Link to post
This topic is now closed to further replies.

  • Create New...