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

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.

Share this post


Link to post

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

Share this post


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

Share this post


Link to post
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!!!! 

Share this post


Link to post

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

Share this post


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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...