How to position individual elements in a simple list

Site URL: https://www.bronzeville-foundation.com/forum-example

password to enter site page: bronzeville

Hello,

If you see the example on the site I linked, I have 4 elements in a simple list which is 3 per row. The 4th list item is aligned to the left. Is there any way I can center this 4th item. Or for example, if I had 5 items, could I center those two?

Thanks.

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!

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

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>

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>

 

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

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.

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!