Help with Slideshow Gallery for mobile

Thank you for this.

7 minutes ago, t12ojs said:

Thank you for this.

I hope I ain't bothering you but on my table the lower three slideshows are slightly cropped on both sides? My first slideshow is perfectly fine though?

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

    .homepage .gallery-fullscreen-slideshow[data-width="full"] {
        height: 40vh !important
    }
    .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] img {
    object-fit: contain !important;
}
}

2 minutes ago, tuanphan said:

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

    .homepage .gallery-fullscreen-slideshow[data-width="full"] {
        height: 40vh !important
    }
    .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] img {
    object-fit: contain !important;
}
}

 

It still has the same issue.

As you can see one has less spacing than the other, this is also on desktop too?

I think I have managed to figure it out!

Hello -

@tuanphan

I am having difficulty working on making the slider gallery mobile friendly it looks

great on desktop but the images a cropped weirdly.

website:

https://jennifer-nnamani.squarespace.com/

Hello.  I am also having issues making my slideshow on a mobile page full width.

https://www.hirokazutakei.com/portrait

how can i make this full width as a slideshow when viewing on mobile?

any help would be appreciated!

On 11/28/2020 at 11:04 PM, DotunAbeshinbioke said:

Hello -

@tuanphan

 

I am having difficulty working on making the slider gallery mobile friendly it looks

great on desktop but the images a cropped weirdly.

website:

https://jennifer-nnamani.squarespace.com/

Have you solved it yet?

18 hours ago, take1official said:

Hello.  I am also having issues making my slideshow on a mobile page full width.

https://www.hirokazutakei.com/portrait

how can i make this full width as a slideshow when viewing on mobile?

any help would be appreciated!

I see fine here. Did you solve?

if no, can you describe in detail?

Site URL: http://www.this-is-nico.com

Hello Tuan, can you help me also please? I have a slideshow gallery on my home page that looks good on desktop but its not resizing for the mobile.

Thanks Nicola

On 12/2/2020 at 4:52 PM, this-nicocreative said:

Site URL: http://www.this-is-nico.com

Hello Tuan, can you help me also please? I have a slideshow gallery on my home page that looks good on desktop but its not resizing for the mobile.

Thanks Nicola

 

Hi. Can you disable autoplay? We can check easier

1 hour ago, tuanphan said:

Hi. Can you disable autoplay? We can check easier

Hello Tuan, Ive just disabled it. Thank you, Nicola

On 12/2/2020 at 5:53 PM, tuanphan said:

I see fine here. Did you solve?

if no, can you describe in detail?

It’s not filling up the empty spaces here. Is it possible to take up the full screen when viewing in mobile?

or, another solution is to add a normal gallery page on mobile, and instead of vertical scroll, make it show one image at a time

Hi Taun,

Are you still on this thread? I was wondering if you knew how to have an image scoll with in a device like this: https://uxfol.io/project/04f0af4a/House2Home

On 12/4/2020 at 5:02 PM, this-nicocreative said:

Hello Tuan, Ive just disabled it. Thank you, Nicola

Add to Home > Design > Custom CSS. You can adjust number 40

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

On 12/5/2020 at 12:16 PM, take1official said:

It’s not filling up the empty spaces here. Is it possible to take up the full screen when viewing in mobile?

 

 

or, another solution is to add a normal gallery page on mobile, and instead of vertical scroll, make it show one image at a time

It looks like there is no way to adjust this :(

On 12/7/2020 at 6:13 AM, phardy said:

Hi Taun,

Are you still on this thread? I was wondering if you knew how to have an image scoll with in a device like this: https://uxfol.io/project/04f0af4a/House2Home

Can you describe in detail & take a screenshot?

On 12/2/2020 at 3:52 AM, tuanphan said:

Have you solved it yet?

No not yet

On 11/28/2020 at 11:04 AM, DotunAbeshinbioke said:

Hello -

@tuanphan

 

I am having difficulty working on making the slider gallery mobile friendly it looks

great on desktop but the images a cropped weirdly.

website:

https://jennifer-nnamani.squarespace.com/

Still having difficulty

Okay, I give up. I've spent almost two hours trying to use and tweak various codes in this thread, but no luck. I'm in 7.0.

I want to do the same thing as the others — force my gallery so it doesn't get small and cropped on mobile. I'm using my gallery as a testimonial section though, so the background image is just white and the text is what's important. The headline is visible on mobile but I need to have it so the copy  doesn't crop off. (Images below are two separate headlines of the rotating testimonials.)

https://oleander-pomegranate-ka8f.squarespace.com
Password: temporaryrebel

Thanks in advance for any help!
Michael

On 12/10/2020 at 10:42 PM, MichaelG_2001 said:

Okay, I give up. I've spent almost two hours trying to use and tweak various codes in this thread, but no luck. I'm in 7.0.

I want to do the same thing as the others — force my gallery so it doesn't get small and cropped on mobile. I'm using my gallery as a testimonial section though, so the background image is just white and the text is what's important. The headline is visible on mobile but I need to have it so the copy  doesn't crop off. (Images below are two separate headlines of the rotating testimonials.)

https://oleander-pomegranate-ka8f.squarespace.com
Password: temporaryrebel

Thanks in advance for any help!
Michael

Hi. Can you disable autoplay? We can check easier.

Also you can use this code to create testimonials, easy to install/customize without coding skills.

Hi, I'm facing the same problem. I have tried using most of the codes shared on this thread, unfortunately they don't seem to work.

I'm using the slideshow reel on Squarespace 7.1. My horizontal images are getting cropped from the sides on the mobile version, they need to be resized so they can be entirely visible. Any suggestions?

On 1/18/2021 at 6:32 PM, SK1889 said:

Hi, I'm facing the same problem. I have tried using most of the codes shared on this thread, unfortunately they don't seem to work.

I'm using the slideshow reel on Squarespace 7.1. My horizontal images are getting cropped from the sides on the mobile version, they need to be resized so they can be entirely visible. Any suggestions?

Can you share link to page where you use reel? We can check easier

Hi @tuanphan!

The homepage gallery on our site doesn't resize properly on mobile. All the other pages and content are responsive and have no issues, but the homepage gallery is cropped. We'd like to still see the full width of the images, but sized to fit whenever it's viewed on a mobile screen. Is there a way we can fix this? Please let me know! Thanks so much!

Site link: https://www.chelseadc.com

On 2/2/2021 at 1:46 AM, ChelseaDC said:

Hi @tuanphan!

The homepage gallery on our site doesn't resize properly on mobile. All the other pages and content are responsive and have no issues, but the homepage gallery is cropped. We'd like to still see the full width of the images, but sized to fit whenever it's viewed on a mobile screen. Is there a way we can fix this? Please let me know! Thanks so much!

Site link: https://www.chelseadc.com

Add to Design > Custom CSS > Then save & reload your site

/* resize mobile slideshow */
@media screen and (max-width:640px) {
section#gallery {
    height: 30vh;
}
section#gallery img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
}