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

Bedford: Changing the banner height?



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.


Link to comment
  • Answers 98
  • Created
  • Last Reply

Recommended Posts

I would really like to know how to change the height of slideshows on Bedford as well. Already suggested to them in a ticket to add that on in the style editor. Hopefully they will. Otherwise if someone could supply a code that would be very much appreciated.

Link to comment

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, there will be JavaScript errors if you put this in the header.

(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;
       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');
           if (wrapper) {
               wrapper.setAttribute('style', '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;

Update: Added some CSS to make the featured blog galleries work.

Update 2: Added an option to make this work on the homepage only.

Developer Evangelist at Squarespace.

Link to comment

@foleyatwork - Unfortunately I'm working in preview mode, though I think I figured out the issue. I was removing "/body.homepage/" entirely and not just the actual comments. I read your notes as if I should remove the comment and it's contents entirely. Oops! Thanks for the quick follow up!

Link to comment

I tried the code above, on my site that is using a gallery on the home page, and it works great. Except on Firefox. On Firefox, the container is scaled (as you can see the black background) but the contained pictures are not. Works in Chrome and IE, and on the iPad. Any ideas?

Link to comment

This works quite well. The only issue I notice is that the images / galleries are window height, but below the header. Meaning a section of the photo goes below the bottom of the screen, equal to the height of the header. This also makes the image body text lower than it should be, since the image body text is centered to the image. Does anyone know a way to subtract the height of the header so the images are truly window height and the body image text is properly centered?

I'm also having issues with Firefox, btw.

Link to comment

@foleyatwork The code worked for me and at first it was fine on mobile too, but now my images aren't fitting on the screen of my phone, they are much wider with mobile styles on or off. Is there something that should be added to fix that? You can see it at www.weatherbrand.com


Link to comment


When I adjust the banner height percentage from @foleyatwork's script (shown in the snippet below), it does nothing. Even if I set it to 20%, it doesn't change anything.

Any help would be greatly appreciated. Thanks!

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

Link to comment


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

This topic is now closed to further replies.

  • Create New...