Jump to content

How to add columns to simple list for mobile view

Recommended Posts

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?

Link to comment

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

image.png.35b55f6c73ae39a8e2f363271d9ac360.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
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

Link to comment
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?

image.thumb.png.8f71b61c6650d3af323c59dc8b0f48e6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

I see you figured it out?

image.thumb.png.8f71b61c6650d3af323c59dc8b0f48e6.png

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

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.