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

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?

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

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!

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!

@tuanphan I've tried to add this to my site as it is exactly what I'm looking for, I've changed the data-section-id but it doesn't seem to be working for me - could you help? 

Thank you!

On 2/17/2023 at 6:10 PM, Mari_Marketing said:

@tuanphan I've tried to add this to my site as it is exactly what I'm looking for, I've changed the data-section-id but it doesn't seem to be working for me - could you help? 

Thank you!

Can you share link to page where you use List on your site?

Hi @tuanphan

I'm trying to achieve something similar. I a have 2 row Simple list on desktop (total: 6 items) but I need it to be a Carousel on mobile (screenshot below)

Can you help me?

This is my site.

password: cyclical

Many thanks!

On 5/26/2023 at 4:26 PM, Begona said:

Hi @tuanphan

I'm trying to achieve something similar. I a have 2 row Simple list on desktop (total: 6 items) but I need it to be a Carousel on mobile (screenshot below)

Can you help me?

This is my site.

password: cyclical

Many thanks!

 

Not possible. We can change Carousel to Grid, but can't change Grid to Carousel.

You can consider adding Carousel, then we can change it to grid on Desktop

Thank you @tuanphan

cyclical

Password is incorrect. If you still need help, just let me know