How do I stop the gallery slideshow from cropping the images & just scale down instead?

Site URL: http://https/bumblebee-pear-rhcn.squarespace.com/

Hi all!

I've been working on rebuilding my current site to version 7.1 for the past two weeks now.

I have a gallery slideshow on my home page that I want to serve as a product advertisement slideshow. For example, on photoshop, I will create images with text on them about bundles (buy 1 get 1 free) & other types of promotions in my store, but I don't want the gallery to crop out any parts of my image when it's viewed on different computers or mobile/tablet view.

I just want it to scale down appropriately without cropping anything to fit the viewer's screen. I don't have my actual images up just yet, it's still the default sample images. But I can still see when it gets cropped in mobile/tablet view. 

I've searched through this forum and google day & night for a working code, but I can't seem to figure it out. Is there any way to keep the images at a fixed height & width size ratio??

I'd appreciate the help so much! Thanks in advance!

Trial site URL: http://https://bumblebee-pear-rhcn.squarespace.com/

PW is 1234.

Add to Home > design > custom CSS

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
	height: 15vh !important;
}
}

On 5/15/2020 at 6:34 AM, tuanphan said:

Add to Home > design > custom CSS

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
	height: 15vh !important;
}
}

 

Hi again!
So this code worked when I checked my site on my phone but when I just checked it on my iPad, the slideshow didn't scale down and is cropped again in this view. Could you help me please? 

Btw, I transferred my domain already so here's my site: 

http://www.fluffielash.co

3 hours ago, xmaaaikee said:

Hi again!
So this code worked when I checked my site on my phone but when I just checked it on my iPad, the slideshow didn't scale down and is cropped again in this view. Could you help me please? 

Btw, I transferred my domain already so here's my site: 

http://www.fluffielash.co

@media screen and (max-width:991px) and (min-width:768px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
	height: 26vh !important;
}
}

Edit 26 to number what you want.

Use both code I sent.

Similar issue, but this code only sort of works on mobile. It works on chrome (sometimes) and works on mobile on Safari.

I'm trying to do something similar but on desktop, not just on mobile. 

I tried removing the media screen portion, but the public version of my site don't reflect the difference.

radius-books.squarespace.com / radius

I've seen this code a few times and it just isn't doing it for me. This seems like such a frustratingly wrong scenario - I'm fine with Squarespace cropping these "background" images on mobile, but on a gallery slideshow? Doesn't make sense.

Any idea what I'm doing wrong with this code? My slideshow is not set to full bleed if that info is useful. I want my slideshow to fit to width of mobile browser rather than manually adjust the height to bodge it if possible.

Cheers x