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.

Hi xmaaaikee, 

If not all of your images have similar sizes and you’re concerned about image cropping, then the Reel or Slideshow designs for a slideshow will be the best option. I am also including a link to Squarespace's help article on gallery sections, so you can have it handy:

Gallery sections in version 7.1

8 hours ago, srodrigues said:

Hi xmaaaikee, 

If not all of your images have similar sizes and you’re concerned about image cropping, then the Reel or Slideshow designs for a slideshow will be the best option. I am also including a link to Squarespace's help article on gallery sections, so you can have it handy:

Gallery sections in version 7.1

Hi, I did check that help article already. So my images will all be the same size about 2000x600px to display promo ads.

I did try all three options of the Gallery slideshow: simple, full, & reel. They all still crop my images when viewed in mobile/tablet mode & only display the center of my images. I just want it to resize my image automatically so the full image shows at all times no matter what device its being viewed on. 

Hi again :),

For personalized support with your site, I'd recommend contacting our Customer Support team. They can take a closer look into it and assist you further.  

Thanks! 

Add to Home > Design > Custom CSS

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

7 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

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

 

Omg, thank you so so so much!!!! 

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

On 6/19/2020 at 7:00 AM, mrjp said:

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

Hi. Sorry for the late reply. Can you share link to your site? We can check easier.

same issue code isnt working 

On 4/29/2021 at 3:36 AM, neranobh2020 said:

same issue code isnt working 

Can you share link to page where you added slideshow? We can check easier

I'm suffering with the same issue.  My site is https://tuna-pepper-4zr2.squarespace.com (password: testtest).  I've got a full bleed slideshow on the homepage - all the original images are the same size and I want to ensure they don't crop at all.

Thanks!

14 hours ago, khs123 said:

I'm suffering with the same issue.  My site is https://tuna-pepper-4zr2.squarespace.com (password: testtest).  I've got a full bleed slideshow on the homepage - all the original images are the same size and I want to ensure they don't crop at all.

Thanks!

Crop on mobile?

@tuanphan no, the images crop on desktop as well

42 minutes ago, khs123 said:

@tuanphan no, the images crop on desktop as well

Add to Design > Custom CSS

.gallery-fullscreen-slideshow-item img {
    object-fit: contain !important;
}

Thanks @tuanphan

Hello @tuanphan! I am having this same issue and wonder if you can assist. I have tried pasting in the code you provided into the CSS, and nothing is happening. I am not sure if I have "autoplay" turned on or not and can't figure out how to check. Here's my site: https://mydriversseat.com/vipday. Thank you for any assistance you can provide!!!

On 6/1/2021 at 8:55 PM, TSClark said:

Hello @tuanphan! I am having this same issue and wonder if you can assist. I have tried pasting in the code you provided into the CSS, and nothing is happening. I am not sure if I have "autoplay" turned on or not and can't figure out how to check. Here's my site: https://mydriversseat.com/vipday. Thank you for any assistance you can provide!!!

You mean top banner image?

/* Mobile-Vip day-resize top image */
@media screen and (max-width:767px) {
[data-section-id="60ac6f98c57e0a2584bdedf9"] {
    min-height: unset !important;
    height: 30vh;
}
}

Hi tuanphan! Yes, and also for the gallery images underneath. There are 2 rotating gallery images. Can you please provide the code for those as well?

I'm referring to the gallery on the main page: https://mydriversseat.com 

Hi I just tried all this code and it's not working for me.

I'm using the banner slide show with images on my Home page (a few scrolls down). Whether someone is on a desktop or mobile phone, I would like the images to be shown fully (rather than cropped by the window size) because the images contains important text.

I tried setting it to ^ above, but I now have it set to "inset" if that matters. 

The website name is jenniferparrella.com 

Please help. Thank you!

On 11/6/2021 at 7:22 AM, Kersten said:

Hi I just tried all this code and it's not working for me.

I'm using the banner slide show with images on my Home page (a few scrolls down). Whether someone is on a desktop or mobile phone, I would like the images to be shown fully (rather than cropped by the window size) because the images contains important text.

I tried setting it to ^ above, but I now have it set to "inset" if that matters. 

The website name is jenniferparrella.com 

Please help. Thank you!

Add to Design > Custom CSS > then save & reload the site

@media screen and (max-width:767px) {
body.homepage ul.slides.slides--initialized {
    min-height: 35vh !important;
}
}

Hi @tuanphan , Ive used the code you put in the chat;

.gallery-fullscreen-slideshow-item img {
    object-fit: contain !important;
}

However it has made my slide show small I was wondering if there was a way to still span the full desktop but not to crop any of the picture

I'm right there with the above poster. Why is this so difficult? I want the images I post to show as I uploaded them, full width, no matter what the size of the page is. So inane. Here's a page where I've used the object-fit: contain snippet. Solves the issue, but the section height is static, so the page looks ridiculous on mobile (albeit no cropping). Perhaps there is a CSS snippet to dynamically adjust section height? I have my sections set to 100.

I also don't understand why there is no function to click and view a photo at full resolution. Hence why I'm forcing myself to use a full-bleed slideshow to maximize image quality, independent of device.

https://hoffmanwedding.squarespace.com/grand-sport

On 1/7/2023 at 1:46 AM, Antiques_store said:

Hi @tuanphan , Ive used the code you put in the chat;

 

.gallery-fullscreen-slideshow-item img {
    object-fit: contain !important;
}

However it has made my slide show small I was wondering if there was a way to still span the full desktop but not to crop any of the picture

Hi. What is your site url?

20 hours ago, mike1305 said:

I'm right there with the above poster. Why is this so difficult? I want the images I post to show as I uploaded them, full width, no matter what the size of the page is. So inane. Here's a page where I've used the object-fit: contain snippet. Solves the issue, but the section height is static, so the page looks ridiculous on mobile (albeit no cropping). Perhaps there is a CSS snippet to dynamically adjust section height? I have my sections set to 100.

I also don't understand why there is no function to click and view a photo at full resolution. Hence why I'm forcing myself to use a full-bleed slideshow to maximize image quality, independent of device.

https://hoffmanwedding.squarespace.com/grand-sport

Add this code under

@media screen and (max-width:991px) {
.gallery-fullscreen-slideshow {
    height: 30vh !important;
}
}

15 hours ago, tuanphan said:

Add this code under

@media screen and (max-width:991px) {
.gallery-fullscreen-slideshow {
    height: 30vh !important;
}
}

 

Thank you for fixing SquareSpace's broken ass website!