Help with Slideshow Gallery for mobile

Hi @tuanphan

I have tried to do all the aforementioned solutions you have written - but my slideshow on the homepage still wont fit properly. I use Slideshow: Full and when I'm looking on a phone, the images are not resized properly - can you please help me. I have now turned off auto-play.

https://www.smusicsupervision.com/

It worked! Thanks so much, @tuanphan!

13 hours ago, Feldborg said:

Hi @tuanphan

I have tried to do all the aforementioned solutions you have written - but my slideshow on the homepage still wont fit properly. I use Slideshow: Full and when I'm looking on a phone, the images are not resized properly - can you please help me. I have now turned off auto-play.

https://www.smusicsupervision.com/

Add to Design > Custom CSS

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

Thank You so much for the information but i am getting a problem when i add slide show to my home page my page speed decreases badly can any one help me in that Site URL: https://www.startmyhouse.com

I'm trying to do the same thing as the OP if anyone can help - would love the slideshow gallery on this page to fill the screen vertically when viewed on mobile.

https://beccagleason.co/weddings

Also is the code for that kind of thing something I can just copy for different galleries or is it specific for each slideshow? 

On 2/17/2021 at 9:02 PM, Elena2004 said:

Thank You so much for the information but i am getting a problem when i add slide show to my home page my page speed decreases badly can any one help me in that Site URL: https://www.startmyhouse.com

Can you check url again? It is WordPress site.

On 2/20/2021 at 3:20 AM, rebeccagleasonphotography said:

I'm trying to do the same thing as the OP if anyone can help - would love the slideshow gallery on this page to fill the screen vertically when viewed on mobile.

https://beccagleason.co/weddings

Also is the code for that kind of thing something I can just copy for different galleries or is it specific for each slideshow? 

Looks fine here. Did you solve this?

On 2/16/2021 at 9:52 AM, tuanphan said:

Add to Design > Custom CSS

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

 

Thanks you so much! 🙏

On 2/21/2021 at 4:47 AM, tuanphan said:

Can you check url again? It is WordPress site.

Looks fine here. Did you solve this?

I didn't, it's this slideshow - I'm trying to get it to fill up the screen vertically on mobile like the banner does

Hi, 

I am currently having trouble with the spacing between this slideshow and the next section as its too big. as shown by the picture below. I also can't get the "shop now" button to move down in the mobile view and is covering the image. do you think you could help me?

On 3/6/2021 at 8:35 AM, snuggs said:

Hi, 

I am currently having trouble with the spacing between this slideshow and the next section as its too big. as shown by the picture below. I also can't get the "shop now" button to move down in the mobile view and is covering the image. do you think you could help me?

Can you share site url?

Hi @tuanphan

I have tried to apply the codes you've written above but still, the slideshow on our website still being cropped severely on the mobile... How can we make it fit properly to show images in full width on mobile? I guess our problem is similar to the one you've solved above in October 2, 2020 (below screenshot)

Our website: https://www.modernfanasia.com/

Please help, thank you in advance!

On 3/15/2021 at 10:39 AM, TWII529 said:

Hi @tuanphan

I have tried to apply the codes you've written above but still, the slideshow on our website still being cropped severely on the mobile... How can we make it fit properly to show images in full width on mobile? I guess our problem is similar to the one you've solved above in October 2, 2020 (below screenshot)

Our website: https://www.modernfanasia.com/

Please help, thank you in advance!

Hi. Can you share link to your site?

Hi @tuanphan

Our site: https://www.modernfanasia.com/

Thanks!

On 3/29/2021 at 11:40 AM, TWII529 said:

Hi @tuanphan

Our site: https://www.modernfanasia.com/

Thanks!

Hi. Add to Design > Custom CSS

/* resize mobile slideshow */
@media screen and (max-width:640px) {
section#home-banner img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#home-banner {
    min-height: unset !important;
    height: 200px !important;
}
}

Hi @tuanphan I have similar problem, tried suggested code here it didn't work.

My website: https://www.sonaskids.com/

Thank you!

12 hours ago, Klaudia said:

Hi @tuanphan I have similar problem, tried suggested code here it didn't work.

 

My website: https://www.sonaskids.com/

Thank you!

Add to Design > Custom CSS

/* resize mobile slideshow */
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

On 4/17/2021 at 5:06 PM, tuanphan said:

Hi. Add to Design > Custom CSS

/* resize mobile slideshow */
@media screen and (max-width:640px) {
section#home-banner img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#home-banner {
    min-height: unset !important;
    height: 200px !important;
}
}

 

Hi @tuanphan it works, thanks a lot!

Hi, I've tried all the codes you've mentioned in the CSS of my website, but I am still getting so much white space around my banner/slider thing when I go to my mobile site.  I don't know if maybe it's my set up?

My web address is www.evdarcy.com.

I would be ever so grateful if you were able to shine a little light on what I'm doing wrong or advise how to fix it?

Many thanks in advance!

Hi,

so sorry this took so long but my site is:

snuggs.co.nz

On 4/25/2021 at 6:18 PM, evdarcy said:

Hi, I've tried all the codes you've mentioned in the CSS of my website, but I am still getting so much white space around my banner/slider thing when I go to my mobile site.  I don't know if maybe it's my set up?

My web address is www.evdarcy.com.

I would be ever so grateful if you were able to shine a little light on what I'm doing wrong or advise how to fix it?

Many thanks in advance!

Add to Design > Custom CSS

/* Mobile slide white spacing */
@media screen and (max-width:640px) {
section#news-slider {
    min-height: unset !important;
}
}

OMG YES!  Thank you so, so much!!  It worked.  You're a genius! Thank you!

Hello Tuan,

Site URL: www.lamexica.mx

I am having trouble with my slideshow gallery on my homepage to show properly on mobile. I'm using Squarespace 7.0. My slideshow gallery is set to be the background/banner on my homepage. Looks great on desktop, but is weirdly cropped on mobile - I'd like it to retain the full images on a phone display. 

Could you please help? 

Thank you! Caitlin

On 5/25/2021 at 5:53 AM, caitshock831 said:

Hello Tuan,

Site URL: www.lamexica.mx

I am having trouble with my slideshow gallery on my homepage to show properly on mobile. I'm using Squarespace 7.0. My slideshow gallery is set to be the background/banner on my homepage. Looks great on desktop, but is weirdly cropped on mobile - I'd like it to retain the full images on a phone display. 

Could you please help? 

Thank you! Caitlin

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

I'm having similar issues. I used the Will Myers auto scrolling slideshow for the home page slider, but it is not formatting correctly on mobile. I wish squarespace would address this! Please help and thank you!!

www.northbeachbandshell.com

14 hours ago, JQ89 said:

I'm having similar issues. I used the Will Myers auto scrolling slideshow for the home page slider, but it is not formatting correctly on mobile. I wish squarespace would address this! Please help and thank you!!

www.northbeachbandshell.com

You mean gallery reel? Add this to Design > Custom CSS > Then save & reload your site

/* Mobile gallery reel */
@media screen and (max-width:767px) {
.gallery-reel {
    height: 34vh !important;
}
}