Change Gallery Slideshow Size for Mobile Only

Site URL: http://wearebelovedstudios.com

Hello! 

Does anyone know if there's a way to make a gallery slideshow block smaller for mobile only? I'm happy with how the rest of the galleries look on the website (http://wearebelovedstudios.com), but the two gallery slideshow blocks on the homepage are too big on mobile, so you can't see the entire photo.

Thanks in advance! :)

Amazing!! Thank you so much tuanphan!! 😄

On 2/19/2021 at 7:57 AM, tuanphan said:

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

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

 

tuanphan - thanks so much for this bit of code! This works perfectly for the homepage. How should the code look so that it applies to the entire site though? I'm having issues with galleries on all pages being too tall on mobile. 

On 11/15/2022 at 12:39 AM, astn_mrtn said:

tuanphan - thanks so much for this bit of code! This works perfectly for the homepage. How should the code look so that it applies to the entire site though? I'm having issues with galleries on all pages being too tall on mobile. 

Remove body.homepage from the code

tuanphan I tried using this code but its not working. Can you please help I need the team members the slideshow on mobile to look smaller so it can display more people as together. 

https://seadragon-gold-ge8l.squarespace.com/config/pages

https://seadragon-gold-ge8l.squarespace.com/homepage

On 2/19/2024 at 1:24 AM, Leticia said:

tuanphan I tried using this code but its not working. Can you please help I need the team members the slideshow on mobile to look smaller so it can display more people as together. 

https://seadragon-gold-ge8l.squarespace.com/config/pages

https://seadragon-gold-ge8l.squarespace.com/homepage

Use this CSS code then save & reload the page

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

Hi @tuanphan

This is what I got. It cut the image in half.

Nevermind. I forgot to reload! Tks