Jump to content

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

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. 
Or send to forum message

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 4 weeks later...

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

Link to comment

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.