Jump to content

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
  • 2 months later...
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;
}
}

 

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
  • 5 months later...

 

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.

Screenshot 2021-11-25 at 12.50.06.png

Screenshot 2021-11-25 at 12.51.41.png

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.

Link to comment

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,

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

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

 

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.