Jump to content

How to position individual elements in a simple list

Recommended Posts

Hi there! What you need is a CSS flexbox rule. Here is the code snippet corresponding to the page section on your website. You'll need to add this in the header code injection of that page:

<style>
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
  }
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container .list-item {
    width: 25% !important;
    min-width: 260px !important;
  }
</style>

Hope this helps!

Link to comment
4 hours ago, Caroline_Smith said:

Hi there! What you need is a CSS flexbox rule. Here is the code snippet corresponding to the page section on your website. You'll need to add this in the header code injection of that page:

<style>
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
  }
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container .list-item {
    width: 25% !important;
    min-width: 260px !important;
  }
</style>

Hope this helps!

Hello,

thanks a lot this definitely helps. But there's one more hiccup, Before I was able to lock them all to be the same height, but now it seems that they're different heights from one another. How can I make sure they stay at the same height as each other?

Thanks again

Link to comment

It seems like there are some empty paragraphs in the first item that are causing the height of the first item to be larger than the others. I would try erasing the unneeded ones. But I did notice the above code I gave you has a horizontal alignment issue. Try this one instead:

<style>
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: start !important;
    justify-content: center !important;
  }
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container .list-item {
    width: 25% !important;
    min-width: 260px !important;
  }
</style>

 

2022-02-12.png

Link to comment
5 hours ago, Caroline_Smith said:

It seems like there are some empty paragraphs in the first item that are causing the height of the first item to be larger than the others. I would try erasing the unneeded ones. But I did notice the above code I gave you has a horizontal alignment issue. Try this one instead:

<style>
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: start !important;
    justify-content: center !important;
  }
  [data-section-id="6206c5656a25c6265191d890"] .user-items-list-item-container .list-item {
    width: 25% !important;
    min-width: 260px !important;
  }
</style>

 

2022-02-12.png

I intentionally added those paragraphs for tests. Let's say each list item had different length content like in those, is there a way to make them all equal the height of the longest card??

 

Thanks again for your help I really appreciate it

 

Edit: I published the page I was trying to mirror with this example. here is the link. For the senior team members I would like for all of their cards to be the same height, but the different length bios make them uneven.

https://www.bronzeville-foundation.com/team

Edited by bronzeville
Link to comment

No problem! You could set a static height for all of the cards, but that would most likely cut off some words or mess up the layout. What I typically try to do in situations like this is make sure each card has a pretty equal amount of title and description text if possible.

Link to comment
1 hour ago, Caroline_Smith said:

No problem! You could set a static height for all of the cards, but that would most likely cut off some words or mess up the layout. What I typically try to do in situations like this is make sure each card has a pretty equal amount of title and description text if possible.

Yes I noticed that static heights only work with certain screen size and window size so I'll try to make the descriptions similar in length. Thanks so much!

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.