Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Keeping Gallery Slideshow Block 'full width' on Mobile.


Recommended Posts

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?

image.thumb.png.70be401cc24cee8616a11d46c43fd686.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

Link to comment
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
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
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
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...