7.1 Slideshow Gallery Section Mobile Resize

On 1/19/2021 at 6:01 PM, CNWilliams said:

Hi @tuanphan i am having the same problem with my mobile slideshow, can you please help me.  there is to much padding on mobile 

https://amphibian-fish-8gpk.squarespace.com/

 

Just answered on another post. You can check.

Having issues with another gallery of mine. Same code as before not working this time. It's not my home page so is it a different code? 

https://raspberry-coyote-6gss.squarespace.com/config/pages

On 3/16/2021 at 12:03 AM, Nipper said:

Having issues with another gallery of mine. Same code as before not working this time. It's not my home page so is it a different code? 

https://raspberry-coyote-6gss.squarespace.com/config/pages

 

Hi. Can you share link to page in screenshot? /config is admin url

Okay I am having the hardest time getting my main gallery/section on my homepage to resize in mobile view. Please help.

www.sacramentoabodes.com

Thank you

On 4/11/2021 at 6:52 AM, KTAbodes said:

Okay I am having the hardest time getting my main gallery/section on my homepage to resize in mobile view. Please help.

www.sacramentoabodes.com

Thank you

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

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

Hi @tuanphan facing same problem, tried everything you suggested above to others. could you please help me too. my web url is www.locusartworks.com

On 10/8/2021 at 9:20 PM, hamzahassan said:

Hi @tuanphan facing same problem, tried everything you suggested above to others. could you please help me too. my web url is www.locusartworks.com

You mean slideshow under Welcome to locus artworks. A place for high-quality yet affordable wall art?

Hi! I’ve tried adding your code to fix all the space above and below my gallery slideshow on mobile and all it does is create a huge space between the image and the  caption below it. I emailed you for help. But just in case I thought I’d come on here and try and see If I could help.please help! Thank you! 😞 @tuanphan

On 11/22/2021 at 5:11 AM, yco said:

Hi! I’ve tried adding your code to fix all the space above and below my gallery slideshow on mobile and all it does is create a huge space between the image and the  caption below it. I emailed you for help. But just in case I thought I’d come on here and try and see If I could help.please help! Thank you! 😞 @tuanphan

Which code did you added? I posted some several different codes in this topic.

And what is your site ur?

I did something much simpler, and it seems to work:

<style>
    .gallery-fullscreen-slideshow {
    height: 60vw !important;
}
  }
</style>

As you can see, instead of vh -- which is based on height, I used vw -- which is based on screen width. That made the slideshow fully responsive no matter what the screen width is used. No need to worry about mobile breakpoints or anything like that.  And, it gets rid of the extra space.

Try it. I hope that it works.

On 1/3/2022 at 5:07 PM, elleirdad said:

I did something much simpler, and it seems to work:

<style>
    .gallery-fullscreen-slideshow {
    height: 60vw !important;
}
  }
</style>

As you can see, instead of vh -- which is based on height, I used vw -- which is based on screen width. That made the slideshow fully responsive no matter what the screen width is used. No need to worry about mobile breakpoints or anything like that.  And, it gets rid of the extra space.

Try it. I hope that it works.

 

This ALMOST worked for me! It worked great for mobile, but now on a browser the gallery banner is zoomed in and its height seems huge. Any clue why this might be? Thanks for helping random people on the internet!

On 3/3/2022 at 3:26 AM, Dusto said:

This ALMOST worked for me! It worked great for mobile, but now on a browser the gallery banner is zoomed in and its height seems huge. Any clue why this might be? Thanks for helping random people on the internet!

You change it to this

<style>
  @media screen and (max-width:767px) {
    .gallery-fullscreen-slideshow {
    height: 60vw !important;
}
  }
</style>

Hi! I'm having trouble with the gallery slideshow on mobile format. I can edit every project page to have fewer space between title, media and description, but on the pages with gallery slideshows it doesn't allow me. Here are two screenshots to exemplify: The one titled Talamo has the format I want, the one titled Fragmentos has excess space at the top and bottom of the gallery slideshow. 

The page can be found at https://www.andyretana.art/

@tuanphan any idea how to fix this?

On 8/4/2023 at 2:49 PM, andyrb said:

Hi! I'm having trouble with the gallery slideshow on mobile format. I can edit every project page to have fewer space between title, media and description, but on the pages with gallery slideshows it doesn't allow me. Here are two screenshots to exemplify: The one titled Talamo has the format I want, the one titled Fragmentos has excess space at the top and bottom of the gallery slideshow. 

The page can be found at https://www.andyretana.art/

@tuanphan any idea how to fix this?

Add to Custom CSS box (Design > Custom CSS or Website > Website Tools > Custom CSS)

/* Work 1 page - All Slideshow on Mobile */
@media screen and (max-width:767px) {
body.collection-64cb1b7874762b555e5fb3fa.view-item {
.gallery-slideshow {
    height: 30vh !important;
}
article section:first-child {
    min-height: unset !important;
    height: 20vh;
}
}}