Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

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.

Link to comment
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. 

Link to comment

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 10 months later...
  • 3 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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!!!

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...