Forte Template: Slideshow gallery to stacked with CSS?

Hi! 

I am using the Forte template and running on the 7.0 platform.

I'd like my gallery to display as stacked (as it does on mobile) instead of a slideshow like it does on desktop: https://www.bbyrd.com/marshmello

I understand that one way around it would be to embed the gallery into a page, but what I like about this template is the ease of use/updating- just creating a gallery and it adds it to the homepage and the navigation.

I wasn't sure if this could be handled with code or CSS... Any help would be appriciated.

Thanks for any assistance!
-Brandy

Try this code to Website > Website Tools > Custom CSS

@media screen and (min-width:901px) {
body#collection-65fb85dc85f8e471c7c1db1a {
#fullscreenBrowser .slideshow {
    position: relative !important;
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    height: auto !important;
}
#fullscreenBrowser .slideshow .slide {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}
#fullscreenBrowser .slideshow .slide img {
    width: 100% !important;
    left: 0 !important;
    position: relative !important;
}
.collection-detail-wrapper {
    display: none;
}
.nav-projects {
    display: none;
}
}}

On 3/31/2024 at 4:59 AM, tuanphan said:

Try this code to Website > Website Tools > Custom CSS

@media screen and (min-width:901px) {
body#collection-65fb85dc85f8e471c7c1db1a {
#fullscreenBrowser .slideshow {
    position: relative !important;
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    height: auto !important;
}
#fullscreenBrowser .slideshow .slide {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}
#fullscreenBrowser .slideshow .slide img {
    width: 100% !important;
    left: 0 !important;
    position: relative !important;
}
.collection-detail-wrapper {
    display: none;
}
.nav-projects {
    display: none;
}
}}

 

Hi! that didn't work.... it still kept it in a scroll.

Thanks for trying though!

-brandy

On 4/12/2024 at 5:19 AM, bbyrd said:

Hi! that didn't work.... it still kept it in a scroll.

Thanks for trying though!

 

-brandy

It looks like already stacked to me

I suspect what @bbyrd wants is for the desktop version of the gallery to look like the mobile version. Both desktop and mobile should be vertically stacked.

I don't have a solution and it could be a bit tricky as I think SS is doing some calculations with code on the fly at times.