Need Slideshow Gallery To Scale Down On Mobile

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

At the top of my homepage www.plantbasedhealthuk.com I have a slideshow gallery. It displays fine on desktop, but portrait mobile view is not scaling down to the screen size. It appears huge and you can only see part of the image. Can anyone help with code or another way to rectify this please?

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !Important;
}
}

On 4/18/2020 at 3:00 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !Important;
}
}

Amazing thank you. One more thing! Is there any way to reduce the white gap that has now appeared above and below this??

On 4/20/2020 at 9:04 PM, CarolineCollard said:

 

Hi. Which gap? can you take screenshot?

Hi @tuanphan

I'm having a similar issue and cannot fix it. The slideshow at the bottom of my homepage on gokombucha.co.uk is not displaying at full width for mobile. Screenshots are attached for desktop and mobile.

Can you please help? Thanks! Hugo

On 2/15/2021 at 10:28 PM, GOKombucha said:

Hi @tuanphan

I'm having a similar issue and cannot fix it. The slideshow at the bottom of my homepage on gokombucha.co.uk is not displaying at full width for mobile. Screenshots are attached for desktop and mobile.

Can you please help? Thanks! Hugo

Add to Design > Custom CSS

/* resize slideshow */
@media screen and (max-width:640px) {
section#go-kombucha-tea img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#go-kombucha-tea {
    min-height: unset !important;
    height: 220px;
}
}