Keeping Gallery Slideshow Block 'full width' on Mobile.

On 2/28/2022 at 12:57 PM, genya said:

Could you please help, I can't get a full gallery view on mobile. I've tried all the codes above.

www.ekkcandleart.com

Hi. You mean this gallery reel?

On 2/27/2022 at 11:37 AM, tuanphan said:

I see you solved with this CSS?

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

@media screen and (min-width: 768px) and (max-width:991px) {
    .gallery-fullscreen-slideshow[data-width="full-bleed"] {
        height:35vh !important
    }
}

 

I did thank you!! What I can't get my head around is if I want to not have the gallery at full bleed but full it won't work. How should I adapt the code for this?

On 4/13/2022 at 8:14 PM, ClaireHowes said:

I did thank you!! What I can't get my head around is if I want to not have the gallery at full bleed but full it won't work. How should I adapt the code for this?

You can use this code

@media screen and (max-width: 767px) {
    .gallery-fullscreen-slideshow {
        height:27vh !important
    }
}

On 7/13/2021 at 5:25 AM, tuanphan said:

Remove the code to hide it on mobile & add this to Design > Custom CSS > Then save & reload the site

/* reel mobile */
@media screen and (max-width:767px) {
body.homepage .gallery-reel {
    height: 30vh !important;
}
}

 

Hi @tuanphan I tried this just now as I have a Gallery Section on my home page set to 

Slideshow: Full

Full Bleed

I need a full-width view on mobile, too but none of this code is working. Would you mind letting me know what I'm missing?

https://www.blackbirdboone.com/ 

pw: MEDSPA

10 hours ago, Tanna said:

On 7/13/2021 at 4:25 PM, tuanphan said:

Remove the code to hide it on mobile & add this to Design > Custom CSS > Then save & reload the site

/* reel mobile */
@media screen and (max-width:767px) {
body.homepage .gallery-reel {
    height: 30vh !important;
}
}

 

Hi @tuanphan I tried this just now as I have a Gallery Section on my home page set to 

Slideshow: Full

Full Bleed

I need a full-width view on mobile, too but none of this code is working. Would you mind letting me know what I'm missing?

https://www.blackbirdboone.com/ 

pw: MEDSPA

Use this CSS

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

I believe I want the same thing to occur for my site, none of the codes I have seen here thus far have worked for me.

The 'Slideshow: Full' looks great on Desktop, but Mobile its 'squished/cropped'. Here's the page url, it is the very first gallery at the top of the page of the 3 images on rotation;

https://www.eddysummers.com.au/documentary-weddings

Can anyone help?

Cheers.
 

On 6/21/2022 at 8:28 PM, dunker56 said:

I believe I want the same thing to occur for my site, none of the codes I have seen here thus far have worked for me.

The 'Slideshow: Full' looks great on Desktop, but Mobile its 'squished/cropped'. Here's the page url, it is the very first gallery at the top of the page of the 3 images on rotation;

https://www.eddysummers.com.au/documentary-weddings

Can anyone help?

Cheers.
 

It looks like you solved with this CSS?

@media only screen and (max-width: 767px) {
    section[data-section-id="6205c9597f1a9d535ceee684"] .gallery-fullscreen-slideshow-item-img img {
        width:100% !important;
        height: auto !important
    }

    section[data-section-id="6205c9597f1a9d535ceee684"] .gallery-fullscreen-slideshow {
        height: 50vh !important
    }
}