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?

If you still need help, use this CSS code

.gallery-slideshow {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}