Create a WAY Better Carousel Layout on Mobile in Squarespace

In this tutorial I show you how to stack the carousel summary block items on mobile view for a much more user friendly design. We will also explore how to add a button on mobile but hide it on desktop.

How to customize the carousel summary block

Custom CSS:

#your-section-name-here {
  @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;
    }
    .summary-item:nth-child(n+4) {
      display: none;
    }
    .summary-carousel-pager {
      display: none;
    }
  }
  @media screen and (min-width: 641px) {
    .button-block {
      display: none;
    }}}

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris