Jump to content

how to centralize an auto list session (card list)

Recommended Posts

I found a tutorial that helps but it was made for a session with 3 columns, I couldn't understand it very well, the code was this:

@media screen and (min-width: 768px) {
  .user-items-list-simple[data-num-columns="3"] {
    grid-template-columns: repeat(~"6,1fr");
  }
  .user-items-list-simple[data-num-columns="3"] .list-item {
    grid-column: span 2;
  }
  .user-items-list-simple[data-num-columns="3"] .list-item:nth-child(4) {
    grid-column: ~"2/4";
  }
}

How do I align this session?

image.thumb.png.53a0846dc7b3f1578ee115f9785b5d6a.png

Link to comment
12 hours ago, Ramon-east said:

I found a tutorial that helps but it was made for a session with 3 columns, I couldn't understand it very well, the code was this:

@media screen and (min-width: 768px) {
  .user-items-list-simple[data-num-columns="3"] {
    grid-template-columns: repeat(~"6,1fr");
  }
  .user-items-list-simple[data-num-columns="3"] .list-item {
    grid-column: span 2;
  }
  .user-items-list-simple[data-num-columns="3"] .list-item:nth-child(4) {
    grid-column: ~"2/4";
  }
}

How do I align this session?

image.thumb.png.53a0846dc7b3f1578ee115f9785b5d6a.png

Can you share your URL so I can check it?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

You can try adding this Custom CSS

section[data-section-id="663cf59e9d606c7344735b88"] .user-items-list-item-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}  

section[data-section-id="663cf59e9d606c7344735b88"]  .list-item {
  width: 23%; 
}

My demo

image.thumb.png.a5af7873fd98a9f66485efd9dba3972a.png

Let me know how it works on your site

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.