Adjusting Height of a Gallery - Carousel Block for Mobile in 7.1 Fluid

Site URL: https://casa-design-la.squarespace.com/home

I'm currently working on a page that features a Gallery block with Carousel setting.

By default the block looked great on desktop, but teeny tiny on mobile.

I added the below code to adjust the height of the images and mobile looks much better, but now on desktop I'm seeing side overlap from the images next to what's being featured.

The amount of overlap differs with each new featured image, and it's not always only on the right side.

Any thoughts on how to fix?

Site URL referenced, pw: casa

/* Enlarge Gallery Carousel block for mobile -- turned off arrows */
.sqs-gallery-design-strip 
{
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

On 9/24/2022 at 1:47 AM, tuanphan said:

You can add query code to make code run on mobile only

@media screen and (max-width:767px) {
/* Enlarge Gallery Carousel block for mobile -- turned off arrows */
.sqs-gallery-design-strip 
{
    position: relative;
    overflow: hidden;
    min-height: 500px;
}
}

 

That worked, thank you!