Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


MayaViolet

Question

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?

 

 

Mobile - Carousel.png

Desktop - List.png

Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

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

 

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
  • 0
Posted (edited)
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 by MayaViolet
Link to comment
  • 0
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!

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