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
    }
}

I have the same problem on my home page and the code doesn't work. The mobile view is cropping my images... Can anybody help? Link to my website is the following: www.alexandrebello.com

20 hours ago, Bello said:

I have the same problem on my home page and the code doesn't work. The mobile view is cropping my images... Can anybody help? Link to my website is the following: www.alexandrebello.com

Add to Design > Custom CSS

/* resize mobile slideshow */
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

On 11/25/2021 at 12:52 PM, Gold1987 said:

Hello,

I have the same issue but the code doesnt work for me too.

Please help.

Thank you.

On 11/28/2021 at 2:14 AM, tuanphan said:

Can you share link to your site? We can check easier

For some odd reason it worked when I manually typed in the section id instead of copying and pasting it in.

Hi @tuanphan or anyone that may be able to help,

Similar problem to our website, homepage gallery reel width does not seem to fit fully in mobile view.

Website: https://lilac-guitar-4rz6.squarespace.com/

Password: ForTheMemories2019


Also a side question if it's ok; for the gallery I haven't been able to put short video clips for the reel (have resorted to using GIFs) - but it appears quite low quality/grainy when shown full screen on the homepage.

Thank you for any help,

20 hours ago, AHCo said:

Hi @tuanphan or anyone that may be able to help,

Similar problem to our website, homepage gallery reel width does not seem to fit fully in mobile view.

Website: https://lilac-guitar-4rz6.squarespace.com/

Password: ForTheMemories2019


Also a side question if it's ok; for the gallery I haven't been able to put short video clips for the reel (have resorted to using GIFs) - but it appears quite low quality/grainy when shown full screen on the homepage.

Thank you for any help,

Hi,

You mean List Section under Homepage Header?

On 2/27/2023 at 3:30 PM, tuanphan said:

Hi,

You mean List Section under Homepage Header?

I think I figured it out now - thank you 🙂

Just playing with the sizing now

Hi there,

Ive tried all sorts, and not managing to make the images also fill the VH set to full screen on mobile in the slider section. If someone could please help? Thank you!

https://fuchsia-arugula-ml4y.squarespace.com/

PW: SV2023

SectionID: section[data-section-id="64415b63e195681f81f38a32"]

On 4/20/2023 at 11:25 PM, SashaMk said:

Hi there,

 

Ive tried all sorts, and not managing to make the images also fill the VH set to full screen on mobile in the slider section. If someone could please help? Thank you!

https://fuchsia-arugula-ml4y.squarespace.com/

PW: SV2023

SectionID: section[data-section-id="64415b63e195681f81f38a32"]

Add to Design > Custom CSS

/* Mobile resize section */
@media screen and (max-width:767px) {
[data-section-id="6421b1604609a93d20b6b247"] {
    min-height: unset !important;
    height: 35vh;
}
}