How to add columns to simple list for mobile view

Site URL: https://www.qutefs.com.au/about

Hi there,

With the new squarespace design system I was hoping I'd be able to increase the columns on my simple list that I have made from the about us template. On desktop it looks great with 5 columns that means visitors dont have to scroll super far to view the content below all of our faces but on mobile its only a single column. Is there a way I can make it atleast two columns on mobile?

Hi,

Add to Design > Custom CSS

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

On 8/14/2022 at 1:54 AM, tuanphan said:

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

Hey @tuanphan I'm trying to achieve the same thing on my site but the code doesn't seem to be working. I've tried with my section id and without but nothing changes. Would you have any ideas? Thanks!

https://brackenridge.squarespace.com/how-we-can-help-you

password: GSPass

9 hours ago, melaniejaane said:

Hey @tuanphan I'm trying to achieve the same thing on my site but the code doesn't seem to be working. I've tried with my section id and without but nothing changes. Would you have any ideas? Thanks!

https://brackenridge.squarespace.com/how-we-can-help-you

password: GSPass

I see you figured it out?

On 2/10/2023 at 9:25 PM, tuanphan said:

I see you figured it out?

@tuanphan yes thank you! Luckily I found a new tutorial showing how to do it. I've popped the code below for anyone who may be looking for this in the future. 😊

 

@media screen and (min-width: 768px) and (max-width: 1500px) {
.user-items-list-simple[data-num-columns="4"] {
  grid-template-columns: repeat(~"4,1fr");
  grid-gap:0 3vw!important;
  }
}

@media screen and (min-width: 300px) and (max-width: 767px) {
.user-items-list-simple[data-num-columns="4"] {
  grid-template-columns: repeat(~"2,1fr");
grid-gap:7vw 4.5vw!important;
  }
}