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