Jump to content

Reduce the width of a single card in the Simple List

Recommended Posts

Hi!

I'm trying to show a single event using a simple list with the ability to easily add more in the future.

When I select "3" columns, it automatically left-aligns, but I'd like it to be centered and as the size shown below. The goal is to give my client the option to simply "ADD A NEW EVENT"  in the future and have it show 3 per column. But right now they only have 1 event to show, so I'd like it to be centered and this size. Is it possible to keep it this size and centered?

I tried editing CSS container width, but when I added another event it squished it into the adjusted container width.

Anyone have an idea how to do this?

 

image.thumb.png.a0cba163839ceb6f486cca29511fd2f0.png

Link to comment

Link to the site and I'll take a look.

Password is fine.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
1 hour ago, HOMENCREATIVE said:

the site isn't live yet - how can i share this?

https://support.squarespace.com/hc/en-us/articles/205810548-Accessing-and-sharing-a-trial-site

Set a password as above.

55 minutes ago, HOMENCREATIVE said:

This is the code I used to get it to how I want it to look, but it doesn't work correctly when I change it to "2" or "3" columns.

/* EVENTS */
#collection-6511c7f02bf4ec3c523db463 {

.user-items-list-item-container[data-section-id="6515d27e14a4da347bec9c66"] {
  width:35%!important;
  }

Again, it's best for me to see the site first. Yours could be made to work in a very hacky way by adding "margin: auto;" too but that's not a long term fix.

If you set the site to password I can take a look tomorrow and show you how to do it right. It's pretty simple but I can't remember all the classes etc off the top of my head.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
18 minutes ago, HOMENCREATIVE said:

Got it! okay, I set it to password. It is happy!

 Let me know your thoughts! Thank you so much!!!

You need to link to the website too.

Also, please use @  to tag me so that I get a notification, or quote my post as I'm signing out and won't know you've replied otherwise. 

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

Clone the page.

Set it to 3 items.

Link me to the page.

And then I can send some CSS.

Basically you need to set it to 3 columns in advance and we'll write something to reposition. Your current setup is not going to work long term but yeah, just do that and it should be a couple lines of CSS.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

Hey

On 10/2/2023 at 8:26 PM, HOMENCREATIVE said:

For future requests, try not to link to your dashboard and just link to the site. I.e. leave off "/config/..." as clicking that will make a login attempt and it just frustrates things.

Anyway, use:

/*Squareskills center list grid item widows*/
ul.user-items-list-item-container.user-items-list-simple {
  @media screen and (min-width: 768px){
    grid-template-columns: ~"repeat(6,1fr)";

    li.list-item:nth-child(3n-2) {
      grid-column-start: 3;
      grid-column-end: 5;
    }
  }

  @media screen and (min-width: 576px){
    grid-template-columns: ~"repeat(4,1fr)";
    li.list-item {
      grid-column: span 2;
    }

    li.list-item:nth-child(3n-2) {
      grid-column-start: 2;
      grid-column-end: 3;
    }
  }
}

That should also account for tablets and mobile.

NOTE: This is only for 3 column grids.

You may wish to use a section ID too for specificity.

Edited by KwameAndCo

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

@pauljason330 are you using an AI chatbot to write your responses?

 

10 hours ago, HOMENCREATIVE said:

Hi there - thanks for sending, but it didn't work! The code made it look like this. It did not center.

I'm trying to examine but the password isn't working.

The issue is likely with Custom CSS using LESS preprocessor. The "repeat" function works funky with it. You can just swap out the two instances like below.

    grid-template-columns: ~"repeat(6,1fr)";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

I thought using quotes would fix it as that works for a few things. Sorry for the oversight. Just put the number of columns using "1fr" instead like I have above.

But sort the password and I can look again.

Edited by KwameAndCo

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

Hi @KwameAndCo no worries!

The website is now live, so I'm trying to see if it will work on a disabled page so I don't mess with the webite.

Since I couldn't get it to work and my client asked to center the event on the page, I removed the user list grid layout temporarily and made it using text and added a card behind it. 

Regarding your recent edit, does this look right?

 

/*Squareskills center list grid item widows*/
#collection-651f05c2501101147b81c623 {
  section[data-section-id="651f05ca2dec2b60f52d2a81"] {
}
ul.user-items-list-item-container.user-items-list-simple {
  @media screen and (min-width: 768px) {
   grid-template-columns: ~"repeat(6,1fr)";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

    li.list-item:nth-child(3n-2) {
      grid-column-end: 5;
    }
  }

  @media screen and (min-width: 576px) {
    grid-template-columns: ~"repeat(6,1fr)";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    li.list-item {
      grid-column: span 2;
    }

    li.list-item:nth-child(3n-2) {
      grid-column-end: 3;
    }
  }
  }
}

Link to comment
On 10/5/2023 at 8:05 PM, HOMENCREATIVE said:

@KwameAndCo Actually, here is the website link with the card feature. I added the code above to CUSTOM CSS. (this page is currently unlinked on the website)

 

For whatever reason the code doesn't work without the "column-start" property.

I've amended my code and it should now work:

/*Squareskills center list grid item widows*/
ul.user-items-list-item-container.user-items-list-simple {
  @media screen and (min-width: 768px){
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

    li.list-item:nth-child(3n-2) {
      grid-column-start: 3;
      grid-column-end: 5;
    }
  }

  @media screen and (min-width: 576px){
    grid-template-columns: 1fr 1fr 1fr 1fr;
    li.list-item {
      grid-column: span 2;
    }

    li.list-item:nth-child(3n-2) {
      grid-column-start: 2;
      grid-column-end: 3;
    }
  }
}

 

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
  • 3 weeks later...

@HOMENCREATIVE

I'm not seeing the code on the test page.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

Apologies, one of the media queries should have read "max" nort "min".

HEre.

*Squareskills center list grid item widows*/
ul.user-items-list-item-container.user-items-list-simple {
  @media screen and (min-width: 768px){
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

    li.list-item:nth-child(3n-2) {
      grid-column-start: 3;
      grid-column-end: 5;
    }
  }

  @media screen and (max-width: 576px){
    grid-template-columns: 1fr 1fr 1fr 1fr;
    li.list-item {
      grid-column: span 2;
    }

    li.list-item:nth-child(3n-2) {
      grid-column-start: 2;
      grid-column-end: 3;
    }
  }
}

 

image.png

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
  • 2 weeks later...
On 11/3/2023 at 11:56 PM, HOMENCREATIVE said:

@KwameAndCo  It worked to center the user list item, but when I go to add a 2nd and 3rd event, it doesn't shift over. It stays center. Therefore looks like this. This seems fairly simply to do but I can't figure it out!

 

Here

/*Squareskills center list grid item widows*/
ul.user-items-list-item-container.user-items-list-simple {
  @media screen and (min-width: 768px){
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    li.list-item {
      grid-column: span 2;
    }
    /*Position Last Item*/
    li.list-item:nth-child(3n-2):last-of-type {
      grid-column-start: 3;
      grid-column-end: 5;
    }
  }

  @media screen and (max-width: 576px){
    grid-template-columns: 1fr 1fr 1fr 1fr;
    li.list-item {
      grid-column: span 2;
    }
/*Position Last Item*/
    li.list-item:nth-child(3n-2):last-of-type {
      grid-column-start: 2;
      grid-column-end: 3;
    }
  }
}

Corrected.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
On 11/9/2023 at 5:57 AM, HOMENCREATIVE said:

ay its almost 100% there. It works for centering the 1st item, and then it shifts over when adding a 2nd or 3rd item.

Is it possible to make it so that when there are 2 items, they are centered in the middle? Instead of left justified like the below?

image.thumb.png.314653bd4b270276593ea1f335d87111.png

Can you check page url again? It doesn't exist now

https://www.youngengineers.com/test

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.