How can I get a full bleed slideshow block on mobile?

Site URL: http://www.grismphotography.com

I have a specific code that makes it so this slideshow only shows up on mobile and tablet devices, or screens smaller than 800 px. The issue is that the image is very small when viewed on mobile. I would like for the image to extend for the entire width of the page. In the image attached, I want the image to go to the red borders. This is a gallery slideshow block as part of an index page. I cannot add another gallery page because the block ID remains the same and will treat it as such. 

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .sqs-gallery-design-stacked-slide img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
body.homepage .sqs-gallery-design-stacked-slide {
    overflow: hidden;
}
}

6 hours ago, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .sqs-gallery-design-stacked-slide img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
body.homepage .sqs-gallery-design-stacked-slide {
    overflow: hidden;
}
}

 

Thank you so much!

That seems to have worked for the width but vertical images are now getting cropped. Any way to extend length as well?

18 hours ago, grizzy13 said:

Thank you so much!

That seems to have worked for the width but vertical images are now getting cropped. Any way to extend length as well?

Try remove this code

body.homepage .sqs-gallery-design-stacked-slide {
    overflow: hidden;
}