Jump to content

Squarespace 7.0 Summary Block – Tweaking Mobile Carousel

Recommended Posts



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.