How to change column of Simple List on Mobile

By default, on Mobile, Simple List will show 1 column. If you want to change it to 2 or 3 columns, you can follow these.

#1. All Simple Lists

Use this code to Website Tools > Custom CSS.

@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;
}}

#2. All Simple Lists on One Page

First, you need to find Page ID. Use this tool.

In my example, it is:

#collection-66b15ce77e10fc00a3dfeb31

Next, use this code to Custom CSS box

#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.

In my example, it is:

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

Next, use this CSS code to Custom CSS box.

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;
}}}