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!
