Slideshow Full-Width inside the Grid / Mobile Padding

Hi Squarespace-Folk,

I am having a problem with the slide-show gallery on desktop and mobile screens (attached screenshots).

1. Desktop
I would like to have the slideshow full-width inside the website grid keeping the original picture ratio 4:3.
In the attached screenshot you see the green box with the outside padding and the blue box with the picture with some padding on the right and left. I was trying to remove it, but I wasn't able to find where to find it. When I found some code with 100% width injected code, the picture was cropped at the bottom.

2. Mobile
On mobile screens on the other hand I have a problem with a too big padding between the picture and the picture description (blue box). And there is some additional padding (orange box) which I can't remove there. Desktop it looks fine.

Could you please help me?

Link: https://chihuahua-sprout-azlt.squarespace.com/
pw: helloworld

Many thanks!

Ondrej

Hi,

Edit this code

@media screen and (max-width: 767px) {
    .homepage .gallery-slideshow {
        height:40vh !important;
        padding-top: 0;
        padding-bottom: 0
    }
}

to this

@media screen and (max-width: 767px) {
    .homepage .gallery-slideshow {
        height:40vh !important;
        padding-top: 0;
        margin-bottom: 0 !important;
    }
}

On 2/10/2023 at 10:32 AM, tuanphan said:

Hi,

Edit this code

@media screen and (max-width: 767px) {
    .homepage .gallery-slideshow {
        height:40vh !important;
        padding-top: 0;
        padding-bottom: 0
    }
}

to this

@media screen and (max-width: 767px) {
    .homepage .gallery-slideshow {
        height:40vh !important;
        padding-top: 0;
        margin-bottom: 0 !important;
    }
}

 

Many thanks! Mobile it looks very nice! 

Do you have any idea how to change the width of the gallery on desktop as in my screenshot above?