Jump to content

Squarespace 7.0 Summary Block – Tweaking Mobile Carousel

Recommended Posts

Hey,

 

I'm helping a client create this landing page and I'm having an issue with the summary block under the 'Testimonials' subheading on mobile.

 

Original this broke the page, but using some CSS I found online I've managed to turn these items into a stacked layout – However we'd ideally like for this to be a single column carousel, so the user can scroll through the four testimonials, rather than them being in a long list – Is this possible?

 

I've pasted the current CSS below and if anyone could help us out with extra CSS/JavaScript it would be much appreciated!

 

@media screen and (max-width: 640px)

{

    .summary-item-list {

      display: -webkit-box;

      display: -webkit-flex;

      display: -ms-flexbox;

      display: flex;

      -webkit-box-orient: vertical;

      -webkit-box-direction: normal;

      -webkit-flex-direction: column;

          -ms-flex-direction: column;

              flex-direction: column;

    }

    .summary-item {

      width: 100%!important;

      margin-bottom: 50px;

    }

  }

Link to comment
  • Replies 1
  • Views 524
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.