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):

 

<script>

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

     return;

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

           elem.setStyles({

               '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');

           }

       }

   }

})();

</script>

<style>

/*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;

}





 

</style>

 

 

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!

mobile-jalyssadoubleu.com.png

desktop-jalyssadoubleu.png

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.