Increase gallery (slideshow:simple) size on mobile view

Hi all,

I currently have 4 gallerys that are formatted for Slideshow:simple. I really like how the slideshow:simple looks on the desktop view however on mobile the photos are very small. Is there a way to increase the photo size to be similar to that of slideshow:full, while maintaining thumbnails on mobile view?

Website page with the galleries can be found at https://www.wildmountaincraftworks.com/cnc-enclosure-photos

Thanks!

-Branden

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-6227e7868e462e6cc6360230 .gallery-slideshow-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}

On 3/10/2023 at 6:34 AM, tuanphan said:

@media screen and (max-width:767px) {
body#collection-6227e7868e462e6cc6360230 .gallery-slideshow-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}

Hi Tuanphan,

Thanks for the quick response. This stretches the width as required however the height isn't adjusting, causing the images to cut off. Is there a way around that?

On 3/12/2023 at 10:21 AM, WildMountainCraftworks said:

It looks like using the following code corrects the issue. Will the height scale properly on different sized screens if the height is fixed to 650px?

[data-section-id="640578fb6e57ca4ca60c2650"] {
    min-height: unset !important;
    height: 650px !important;
}

Do you still need help? We can adjust height for multi screen sizes

21 hours ago, tuanphan said:

Do you still need help? We can adjust height for multi screen sizes

I think I have it figured out. Thank you!