[Share] How to change column of Simple List on Mobile

You can use these CSS code (Website Tools > Custom CSS) to change number of columns of Simple List Section on Mobile.

If CSS doesn't work, you can send link to page where you use Simple List, I will check again.

#1. All Simple Lists

@media screen and (max-width:767px) {
  ul.user-items-list-item-container.user-items-list-simple {
      grid-template-columns: repeat(2,1fr);
      grid-gap: 10px 10px !important;
  }
}

Result

#2. All Simple Lists on One Page

First, you need to find Page ID. You can use this tool.

In my example, it is: #collection-66b15ce77e10fc00a3dfeb31

Next, use CSS code like this

#collection-66b15ce77e10fc00a3dfeb31 {
  @media screen and (max-width:767px) {
    ul.user-items-list-item-container.user-items-list-simple {
        grid-template-columns: repeat(2,1fr);
        grid-gap: 10px 10px !important;
    }
  }
}

#3. Specific Simple List

First, you need to find Simple List Section ID. Use #2 tool.

In my example, it is:

section[data-section-id="66b15cf3636b196012828b12"]

Next, use CSS code like this

section[data-section-id="66b15cf3636b196012828b12"] {
  @media screen and (max-width:767px) {
    ul.user-items-list-item-container.user-items-list-simple {
        grid-template-columns: repeat(2,1fr);
        grid-gap: 10px 10px !important;
    }
  }
}