Jump to content

[Share] List Simple to Carousel on Mobile

Recommended Posts

Posted

To change List Simple (People Section) to Carousel on Mobile, you can do these.

  •  We will add List Carousel, then use CSS code to change Carousel to List Simple on Desktop.

#1. First, add a List Carousel, we will have something like this.

image.png.eea36715bbf349d8d21f82adbcb1fc7b.png

#2. Find Carousel ID.

section[data-section-id="6704d59e0d0efb17d4423220"]

image.thumb.png.939cebabbccc5f5e59e2bf982eb116fa.png

#3. Use this code to Custom CSS box

@media screen and (min-width:768px) {
  section[data-section-id="6704d59e0d0efb17d4423220"] {
    .user-items-list-carousel__gutter, .user-items-list-carousel__slides-revealer {
        overflow: visible !important;
    }
    .mobile-arrows, .desktop-arrows {
        display: none !important;
    }
    .user-items-list-carousel__slide {
        transform: unset !important;
        margin-bottom: 20px !important;
        grid-column-start: unset !important;
        grid-column-end: unset !important;
        pointer-events: initial !important;
        user-select: initial !important;
        grid-row-start: unset !important;
        grid-row-end: unset !important;
    }
    ul.user-items-list-carousel__slides {
        display: grid !important;
        grid-template-columns: repeat(3,1fr) !important;
    }
  }
}

#4. Result

(Desktop)

image.png.013ce45a81f071ff266941f6150310d0.png

(Mobile)

image.png.314f194994acabc82d612ea23e5ab07c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • Replies 0
  • Views 360
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.