Image Gallery Reel Reload Issue

Hello,

I have an image gallery reel on my Squarespace site with 10 images. On desktop display, it works fine (it slides through all 10 images). However, on mobile display, it appears to only show 3-4 images, then it reloads. It continues to only show those same 3-4 images, not all 10.

I'd really appreciate it if someone can check the desktop and mobile display to see what I am talking about. I'm wondering if this is a glitch with Squarespace, or if this can be fixed with custom CSS. Any help would be greatly appreciate. Thanks in advance!

Site: foothome.com

Site password: password

The site has 2 password, can you check it again?

(Maybe you set site wide password + homepage password)

Hi, 

Thanks for your message. Can you please try now?

Password: password123

Also, find attached images of the code that was used to autoplay this image gallery reel. On mobile, this autoplay does not work for all 10 images. Only 3-4. I think you will have to check this on your mobile device.

Your help is greatly appreciated. 

 

Use this code to Custom CSS box

@media screen and (max-width:767px) {
body.homepage .gallery-reel {
    height: 20vh !important;
}
}

Thanks for the suggestion. I tried this, and it didn't seem to fully work. More images showed this time (8 instead of 3-4), but they display in too small of a size now on both desktop and mobile. I adjusted the images back to the way they were before, bigger. Is there a way to maintain the same size as before but just have an "infinite" play on mobile so the reel doesn't reset after showing only 3-4 images?

Please let me know if you need any additional information from me. I can invite you to take a look at my custom CSS if you'd like. Thank you.

Also, when I'm using this image gallery reel on mobile, it seems to extend the size of my page. Please see here: https://drive.google.com/file/d/1HUnsbuuGOw8Qbnn71MfyOlbKiThD5nb0/view?usp=sharing

Apparently, you can manually scroll sideways. Can this be turned off on mobile as well? I just want it to be the default screen size where the images slide in and out normally.

Hopefully we can find a solution for this and the correct image display size. Your help is greatly appreciated. 

Use this to Custom CSS box

body, html {
    overflow-x: hidden;
}

The code seemed to turn off the manual scrolling sideways. Thanks for that! This is good progress.

Yet, I still see only 4 images displaying on my mobile gallery instead of 10 (desktop shows 10).

See video here: https://drive.google.com/file/d/1l7YmsKYMCrVg7Qxena_qgyJS05rwQ9p0/view?usp=sharing

It refreshes after 4, and doesn't show the full 10. Am I missing something here? As mentioned before, I'm looking to keep the same exact image size they are now. I just want all 10 of the images to display. 

Thanks for your time. 

Try this CSS code

@media screen and (max-width:767px) {
.gallery-reel-list {
    width: 8000px !important;
}
}