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 post
  • Replies 18
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

Add to Design > Custom CSS .gallery-fullscreen-slideshow-item img { object-fit: contain !important; }  

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 post

Add to Home > Design > Custom CSS

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

 

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

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

Link to post
  • 10 months later...
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

Link to post
  • 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?

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

 

Link to post

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 post
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;
}
}

 

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