Equal size list blocks

Site URL: https://www.groei-praktijk.nl

Dear all,

Whenever i've used a "list" with different columns, the columns are unequal in size.

If there's just two blocks in a list format, I think it looks messy.
I've tried to align them with the spacing in the text block, but that differs for different browsers and so the blocks will still be in nonalignment.

Can anyone help me out?
How do I make sure that the blocks within the list formats have the same size, regardless of amount of text in the block?
thanks!

Password of website is Degroeipraktijk

illustration: 

Can you share link to exact page? We don't see it on homepage

https://www.groei-praktijk.nl/tarieven-en-vergoeding
https://www.groei-praktijk.nl/bronnen-inspiratie

Also depends on the browser

On 1/17/2022 at 6:04 PM, Groei said:

https://www.groei-praktijk.nl/tarieven-en-vergoeding
https://www.groei-praktijk.nl/bronnen-inspiratie

Also depends on the browser

First page

Try adding to Design > Custom CSS

/* Vergoedingen. */
.user-items-list-item-container[data-section-id="61b7cf9e8f304d2e9239de43"] {
@media screen and (min-width:992px) {
.list-item-content__description {
    min-height: 350px;
}
}
@media screen and (max-width:991px) and (min-width:768px) {
h2.list-item-content__title {
    min-height: 80px;
}
.list-item-content__description br {
    display: none;
}
.list-item-content__description {
    min-height: 570px;
}}}

Thank you @tuanphan.

Worked for the lower lists with "vergoedingen". Not yet for the upper one, with "tarieven".

Could you help me out there too?

Thanks!

19 hours ago, Groei said:

Thank you @tuanphan.

Worked for the lower lists with "vergoedingen". Not yet for the upper one, with "tarieven".

Could you help me out there too?

Thanks!

Try this new code

/* Vergoedingen - Tarieven */
.user-items-list-item-container[data-section-id="61b7cf9e8f304d2e9239de43"], .user-items-list-item-container[data-section-id="61a156a60246c709379298a3"] {
@media screen and (min-width:992px) {
.list-item-content__description {
    min-height: 350px;
}
}
@media screen and (max-width:991px) and (min-width:768px) {
h2.list-item-content__title {
    min-height: 80px;
}
.list-item-content__description br {
    display: none;
}
.list-item-content__description {
    min-height: 570px;
}}}

Think it worked! I'll try out some other browsers too

Hi @tuanphan

Hope you're well?

I'm using a list section with three simple list items, please see https://beige-oleander-mp66.squarespace.com/ homepage password: tuansqsp

The title of the first list item spreads over to 2 lines, which makes the whole item longer in length than the others. How do I make all 3 have the same length without adjusting font size? Please?

16 hours ago, Iwan said:

Hi @tuanphan

Hope you're well?

I'm using a list section with three simple list items, please see https://beige-oleander-mp66.squarespace.com/ homepage password: tuansqsp

The title of the first list item spreads over to 2 lines, which makes the whole item longer in length than the others. How do I make all 3 have the same length without adjusting font size? Please?

It looks like you figured it out?

No, I got the blocks the same height but the BUTTONS are not on the same horizontal line?? Please can you help?

On 4/5/2022 at 2:50 PM, Iwan said:

No, I got the blocks the same height but the BUTTONS are not on the same horizontal line?? Please can you help?

Add to Design > Custom CSS

/* Homepage - Line up buttons */
@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="622daa2f144cda6e4185be86"] {
a.list-item-content__button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}
.list-item-content__button-container {
    position: static !important;
}
li.list-item.list-item-basic-animation {
    position: relative;
}}}

Thank you so much @tuanphan. But as per attached image showing the result, the buttons are now right on the bottom edge of the blocks...

I need the block backgrounds to extend past the buttons please? And also for the blocks themselves to be slightly longer in height...

Hi @tuanphan I have the same problem on my lists and not sure which CSS code to inject to fix this. For the "Here’s what we’ll be working on week by week…" section of the homepage.

Can you help?

Website: https://abbynordquist-sidehustle.squarespace.com/

Password: missingus

Thank you!

On 4/18/2022 at 11:09 PM, Nathan17 said:

Hi @tuanphan I have the same problem on my lists and not sure which CSS code to inject to fix this. For the "Here’s what we’ll be working on week by week…" section of the homepage.

Can you help?

Website: https://abbynordquist-sidehustle.squarespace.com/

Password: missingus

 

Thank you!

Hi.

Try adding to Design > Custom CSS

/* equal list blocks */
@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="62574d392b592528bbacd059"] {
.list-item-content__description {
    min-height: 170px;
}
li:nth-child(n+7) h2 {
    min-height: 70px !important;
}}
}

Hi @tuanphan, it worked! Thank you so much! 

Do you have a fix to center the 9th and 10th step blocks at the bottom by any chance? 

11 hours ago, Nathan17 said:

Hi @tuanphan, it worked! Thank you so much! 

Do you have a fix to center the 9th and 10th step blocks at the bottom by any chance? 

/* center 9 - 10 */
@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="62574d392b592528bbacd059"] li:nth-child(n+10) {
    position: relative;
    left: 50%;
}
}

@tuanphanThank you! 😄

Hello! I am having the same issue. Here is the site: https://cone-marigold-zabj.squarespace.com/. Password: discoverytours

Does the code for this depend on each individual site? Would love some help if you have time, @tuanphan. 

On 5/11/2022 at 5:45 AM, lainer said:

Hello! I am having the same issue. Here is the site: https://cone-marigold-zabj.squarespace.com/. Password: discoverytours

Does the code for this depend on each individual site? Would love some help if you have time, @tuanphan. 

Hi. Choose this option to equal list height

Oh my gosh, @tuanphan, thank you!! Such an easy fix! I had no idea this was an option. Thank you!!