Jump to content

I used code to make my Bedford home page banner full length. Now how do I resize it for mobile?

Recommended Posts

Hi! I used the following code to make my Bedford home page banner full-width (disclaimer: it worked perfectly just had to add it to the footer):



(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')) {


   } 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;






But on mobile, the image is cropped. How do I resize the image on mobile so that it shows the full image instead of the cropped version? Screenshots attached. Looking forward to hearing from you!



Link to comment
  • Replies 1
  • Views 394
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

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