How to create vertical list sections inSquarespace

page section

Oct 1

I love list sections in Squarespace. It’s such an easy and efficient way to organize and align text and buttons with images. But for a recent project, the horizontal view did not look good. The titles and descriptions for my list didn’t have a consistant length so it looked kinda messy! That’s why I created the code I’m sharing in this tutorial.

This custom code will change the list section format to display your list item content in a row, creating a vertical list on desktop, and it optimizes text and button alignment for mobile.

I’ve got the original code for you below, along with a link to the chrome extension you can use to target the specific data section, if you need to. And if that sentence didn’t make sense to you, watch the tutorial video and you’ll understand why that’s so important 😉

Here are the codes from this tutorial. I misspoke in the video; there are SEVEN spots for your data section ID below.

🔌 Here is a link to the Chrome Extension I use in the video: tutorails.squarespace.com/chromeext

@media only screen and (min-width: 640px) {
[data-section-id]  .user-items-list-simple .list-item{
flex-direction:row
}
[data-section-id]  .user-items-list-simple[data-media-alignment="left"] .list-item-media{
  margin-right:5%
    }
}
@media only screen and (max-width: 640px) {
[data-section-id]  .user-items-list-simple *{
     align-content:center!important;
     justify-content:center!important;
  text-align:center!important;
  }
[data-section-id]    .list-item-media{
     margin:auto!important;
  }
[data-section-id]  .list-item-content__title{
  margin-top:.5rem!important;
  margin-bottom:.5rem!important
  }
[data-section-id]  .list-item-content__button{
  display:flex!important
  }
}
[data-section-id] .list-item-content__button:hover{
    background: #a1d9dd!important;
    color:#333!important;
    opacity:1!important
}