Is there a way to have a different gallery structure on mobile?

On desktop view, I have a full bleed slideshow for my homepage. Is there any way to have on mobile a single column grid view instead? Such as in the attached pic. I’m guessing it’s not possible to have different formats on desktop and mobile but thought I’d ask just in case.

Hi,

This is possible. If you share link to page where you use gallery, we can help easier

7 hours ago, tuanphan said:

Hi,

This is possible. If you share link to page where you use gallery, we can help easier

https://orchid-flatworm-splc.squarespace.com/

temppassword123

9 hours ago, tuanphan said:

Hi,

This is possible. If you share link to page where you use gallery, we can help easier

Tuan, I think I figured it out. If I use code to "hide" the slideshow on mobile only, and add it's own gallery with the same images I can do the stacked images instead. Let me know if you can take a look and if you think there is any better way? Thanks! 

On 12/31/2022 at 2:14 AM, Jennverrier said:

Tuan, I think I figured it out. If I use code to "hide" the slideshow on mobile only, and add it's own gallery with the same images I can do the stacked images instead. Let me know if you can take a look and if you think there is any better way? Thanks! 

Yes. I usually do 2 approaches

#1. Add 2 Galleries: Slideshow - Grid, then use code to show Grid on mobile, show slideshow on desktop. If you need code for this, add 2 galleries first, then we can check & give code easier

#2. Use code and try change slideshow to grid on mobile.

11 minutes ago, tuanphan said:

Yes. I usually do 2 approaches

#1. Add 2 Galleries: Slideshow - Grid, then use code to show Grid on mobile, show slideshow on desktop. If you need code for this, add 2 galleries first, then we can check & give code easier

#2. Use code and try change slideshow to grid on mobile.

Tuan,

Below is the code I used for option #1. Is there anything better?

What code would you use for option #2?

/* Hide this on Mobile */
@media screen and (max-width:640px) {
    [data-section-id="630138d6c9719d4bab17463e"] {
        display: none;
    }
}

/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
    [data-section-id="63af5cdb645430422bb7652f"] {
        display: none;
    }
}

On 1/3/2023 at 9:32 PM, Jennverrier said:

Tuan,

 

Below is the code I used for option #1. Is there anything better?

 

What code would you use for option #2?

 

/* Hide this on Mobile */
@media screen and (max-width:640px) {
    [data-section-id="630138d6c9719d4bab17463e"] {
        display: none;
    }
}

/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
    [data-section-id="63af5cdb645430422bb7652f"] {
        display: none;
    }
}

#1. first code, change 640px to 767px

#2. First, remove this code

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

Then add this to Design > Custom CSS

/* Gallery slideshow to stacked */
@media screen and (max-width:767px) {
body.homepage {
.gallery-fullscreen-slideshow * {
    opacity: 1 !important;
}
figure.gallery-fullscreen-slideshow-item {
    position: relative !important;
    visibility: visible !important;
}
.gallery-fullscreen-slideshow {
    height: auto !important;
}
.gallery-fullscreen-slideshow-wrapper {
    height: 100% !important;
}
.gallery-fullscreen-slideshow-list {
    position: static !important;
    height: auto !important;
}
.gallery-fullscreen-slideshow-item img {
    position: static !important;
    visibility: visible !important;
}
.gallery-fullscreen-slideshow-controls {
    display: none !important;
}}}

I tried the 2nd option, but not seeing anything. Just white space? 

On 1/6/2023 at 11:59 PM, Jennverrier said:

I tried the 2nd option, but not seeing anything. Just white space? 

You can remove the code, I will test it again

Hello Guys, 

I have the same problem with my website! Do you think I could get some help. 

I would like to have two different galery types on my mobile and desktop. 

I would like to see "diasporama:Bobine" on my Desktop 

and "grille:Bandes" on my phone. 

I would like to add this option to SELECTED PRINTS and PORTRAITS. 

PS: I cannot do code. I know nothing of it! 

Thank you 
Pedro 

https://capybera-red-nd44.squarespace.com/config/help

DSRW2U55XF2W552MYDXSPBPJ223Z6ITM

On 1/9/2023 at 4:21 PM, pedropode said:

https://capybera-red-nd44.squarespace.com/config/help

DSRW2U55XF2W552MYDXSPBPJ223Z6ITM

Which page are you referring to? /config is admin url