Jump to content

Equal size list blocks

Recommended Posts

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!

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

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;
}}}

 

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
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;
}}}

 

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
  • 2 months later...
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?

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
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;
}}}

 

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

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...

CaptureI.PNG

Link to comment
  • 2 weeks later...
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;
}}
}

 

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
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%;
}
}

 

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
  • 2 weeks later...
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

equal.png

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
  • 3 weeks later...

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.