7.1 Simple List on desktop --> Change to Carousel only on mobile?

MayaViolet · March 22

Hi all - Working on using SS's auto-list sections so that they work well both on Desktop and Mobile.

I would like to have the "Simple List" layout on desktop, so that I can list information for easily legibility from the get-go, but have it adjust to a "Carousel" version on mobile, without having to create two versions, one for each screen size.

My thought process is to take the Carousel version, but on desktop, change the layout to 1 column with the "Elements" stacked on top of each other, and hide the arrows. Mockup example below. I can't for the life of me figure out the code to do it. Any ideas?

tuanphan · March 26

On 3/25/2022 at 12:18 AM, MayaViolet said:

Yup! Page is here (pw: test).

The first section has the layout using "Simple List" as I'd like it to look on desktop. The section below is duplicated, but set to "Carousel." Ideally would like to use code targeting @media all and (min-width: 640px) to change the "Carousel" to look like the section above it on Desktop, but remain swipeable in Carousel form on mobile.

Thanks for your time as always @tuanphan!

*Note - This page^ is different from the mockups above, but same concept!

Try adding to Design > Custom CSS

/* Desktop - List Carouse to Grid */
@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="623ca73e73bc4d410798f0b1"] {
.user-items-list-carousel__slides {
    grid-template-columns: repeat(4,1fr) !important;
}
.user-items-list-carousel__slide {
    transform: unset !important;
    pointer-events: initial !important;
    grid: unset !important;
    display: block !important;
    grid-column: unset !important;
    grid-row: unset !important;
    user-select: unset !important;
}
.user-items-list-carousel__arrow-wrapper {
    display: none !important;
}}}

tuanphan · March 24

Can you share link to page where you added carousel? We can check easier

MayaViolet · March 24

9 hours ago, tuanphan said:

Can you share link to page where you added carousel? We can check easier

Yup! Page is here (pw: test).

The first section has the layout using "Simple List" as I'd like it to look on desktop. The section below is duplicated, but set to "Carousel." Ideally would like to use code targeting @media all and (min-width: 640px) to change the "Carousel" to look like the section above it on Desktop, but remain swipeable in Carousel form on mobile.

Thanks for your time as always @tuanphan!

*Note - This page^ is different from the mockups above, but same concept!

Edited March 24 by MayaViolet

MayaViolet · March 28

On 3/26/2022 at 12:02 AM, tuanphan said:

Try adding to Design > Custom CSS

/* Desktop - List Carouse to Grid */
@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="623ca73e73bc4d410798f0b1"] {
.user-items-list-carousel__slides {
    grid-template-columns: repeat(4,1fr) !important;
}
.user-items-list-carousel__slide {
    transform: unset !important;
    pointer-events: initial !important;
    grid: unset !important;
    display: block !important;
    grid-column: unset !important;
    grid-row: unset !important;
    user-select: unset !important;
}
.user-items-list-carousel__arrow-wrapper {
    display: none !important;
}}}

That did the trick! Thank you @tuanphan, you are a savior!

7.1 Simple List on desktop --> Change to Carousel only on mobile?

Question

MayaViolet

Link to comment

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

MayaViolet

Posted Images

4 answers to this question

Recommended Posts

tuanphan

Link to comment

tuanphan

Link to comment

MayaViolet

Link to comment

MayaViolet

Link to comment

Create an account or sign in to comment

MayaViolet

Support

Community

Developers

Resources