Increasing Gallery Image Size in Mobile

Site URL: https://blackbird-chameleon-4tm8.squarespace.com/chapter1

I'm having trouble increasing the sizes of the images in my gallery slideshow, in mobile layout. See attached image for the desired effect. Any help would be greatly appreciated.  Thanks.

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-61ec64673ad0a2796ceb21f3 .gallery-slideshow-item img {
    width: 120% !important;
    left: 50% !important;
    transform: translateX(-50%);
}
}

On 2/23/2022 at 2:33 AM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-61ec64673ad0a2796ceb21f3 .gallery-slideshow-item img {
    width: 120% !important;
    left: 50% !important;
    transform: translateX(-50%);
}
}

 

Thank you so much for your help. Now that the image is larger, it is being cropped on the left/right/bottom. Can you help me enlarge the space around the image, so that it looks like the "after" image in my original post?

Thanks!

Hi,

Try this new code

@media screen and (max-width:767px) {
body#collection-61ec64673ad0a2796ceb21f3 {
.gallery-slideshow-item img {
    width: 120% !important;
    left: 50% !important;
    transform: translateX(-50%);
}
    .gallery-slideshow-item-src {
    overflow: visible;
}}
}