Resize Images in slideshow for Mobile in Squarespace 7.1

Site URL: https://www.gayagrinberg.com/

Hi,

I use an image slideshow on one of my site's pages,

But when I'm on mobile the images on the slideshow look too big,

It is not resized to the phone screen. 

I mean specifically to the sildeshow on this page https://www.gayagrinberg.com/work/lontano-magazine

Is there anything I can do so it will look better? 

Thank you. 

Thank you!

Hello,

I have managed to resize  my homepage to mobile screen but I can't do the slideshows on my  pages. Could someone recommend something.

Thank you 

On 4/10/2023 at 8:24 PM, Helenenou said:

Hello,

I have managed to resize  my homepage to mobile screen but I can't do the slideshows on my  pages. Could someone recommend something.

Thank you 

Can you share link to page where you use slideshow?

I'm having an issue with my slideshow images on my site (https://lulasplaceeatery.net/) being too wide and getting cropped on mobile devices, even after putting in this code: 
/* - - Gallery Reel - - */
@media only screen and (max-width:767px) {
.gallery-reel{
height:50vh!important
}
.gallery-reel-item{
height: inherit!important
}
}

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

/* - - Simple Slideshow - - */
@media only screen and (max-width:767px) {
.gallery-slideshow-item-wrapper, .gallery-slideshow-item img{
width: 100vw!important;
object-fit: cover;
left: 0!important
}
}

/* - - Show Thumbnails - - */
@media only screen and (max-width:767px) {
.gallery-slideshow-thumbnails {
display: inline!important
}
}

The height is correct but the width seems to still be an issue. 

On 1/8/2024 at 10:09 PM, squeaker76 said:

I'm having an issue with my slideshow images on my site (https://lulasplaceeatery.net/) being too wide and getting cropped on mobile devices, even after putting in this code: 
/* - - Gallery Reel - - */
@media only screen and (max-width:767px) {
.gallery-reel{
height:50vh!important
}
.gallery-reel-item{
height: inherit!important
}
}

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

/* - - Simple Slideshow - - */
@media only screen and (max-width:767px) {
.gallery-slideshow-item-wrapper, .gallery-slideshow-item img{
width: 100vw!important;
object-fit: cover;
left: 0!important
}
}

/* - - Show Thumbnails - - */
@media only screen and (max-width:767px) {
.gallery-slideshow-thumbnails {
display: inline!important
}
}

The height is correct but the width seems to still be an issue. 

 

It seems fine to me