bronzeville

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!

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

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

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.

On 10/6/2021 at 4:32 AM, tuanphan said:

You want the code runs on all section on Team 2 page or which section? We can tweak & give new code

Hello, following up with another question here – I'm wondering how I can use CSS to center certain items in my simple list.

I have 4 team members, but only 3 per row, how can I center the 4th member

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