New Auto content blocks/lists equal height?

Site URL: https://recreare.squarespace.com/

Site: https://recreare.squarespace.com/
Password: recreare

Hi!

I'm using the new auto-content blocks and would like the list items or cards to be equal height.
Super thankful for any suggestions or help!

Thanks!
Jenni

Hi.

Add to Design > Custom CSS

/* Equal list */
@media screen and (min-width:992px) {
[data-section-id="60c7118e10d428741464fcb3"] {
.list-item-content__description p:empty {
    display: none;
}
.list-item-content__description>p:first-child {
    min-height: 90px;
}
/* boxes 456 */
li.list-item:nth-child(n+4) h2.list-item-content__title {
    min-height: 90px;
}
}}

Hi, I used this code to make the height of these list cards equal: https://www.consuli.net/collaborators but it is not working for me since I am not using the titles (I need to add hyperlinks to the titles so I added them to the text body). Any clues? This is the code:

/* Equal list */

@media screen and (min-width:992px) {

[data-section-id="615dd1e21b099e0af9345102"] {

.list-item-content__description p:empty {

    display: none;

}

.list-item-content__description>p:first-child {

    min-height: 90px;

}

/* boxes 456 */

li.list-item:nth-child(n+4) h2.list-item-content__title {

    min-height: 90px;

}

}}

8 hours ago, Anaimation said:

Hi, I used this code to make the height of these list cards equal: https://www.consuli.net/collaborators but it is not working for me since I am not using the titles (I need to add hyperlinks to the titles so I added them to the text body). Any clues? This is the code:

/* Equal list */

@media screen and (min-width:992px) {

[data-section-id="615dd1e21b099e0af9345102"] {

.list-item-content__description p:empty {

    display: none;

}

.list-item-content__description>p:first-child {

    min-height: 90px;

}

/* boxes 456 */

li.list-item:nth-child(n+4) h2.list-item-content__title {

    min-height: 90px;

}

}}

 

Try this

@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="615dd1e21b099e0af9345102"] .list-item-content__description {
    min-height: 250px;
}
}

Just wanted to update this post - Squarespace rolled out an update and you no longer need a code solution here. In the auto layout (list) section, just go to Edit Content > Design > Size & Space. Scroll to the bottom and there is now the option to make each item the same height under Position:

@christyprice Hi Christy, thanks for the above...I just tried this...but now my buttons are not on the same horizontal?? 🙂 Please advise a fix?

ps: @christyprice because one of my list items has a title that spreads over 2 lines...

@Iwan you can either shorten your title or use the code fix @tuanphan gave above which targets only the description area

Ok, thank you

15 hours ago, Iwan said:

Ok, thank you

Did you solve or still need help?

@tuanphan I still need help please, my buttons do not line up.

Also, please can you help me change the font family of my image and video captions - as well as my header navigation menu items...they all need to be DIN CONDENSED...

Thank you!

23 hours ago, Iwan said:

@tuanphan I still need help please, my buttons do not line up.

Also, please can you help me change the font family of my image and video captions - as well as my header navigation menu items...they all need to be DIN CONDENSED...

Thank you!

Can you share link to page where you have problem?

Thank you, on the homepage of https://beige-oleander-mp66.squarespace.com/
The caption text under the image in the middle of the page...

password tuansqsp

ALSO, please see below that...there are three list blocks next to each other...I need the buttons on the same horizontal so all three blocks look the same and are lined up? Please Tuan.

17 hours ago, Iwan said:

Thank you, on the homepage of https://beige-oleander-mp66.squarespace.com/
The caption text under the image in the middle of the page...

password tuansqsp

ALSO, please see below that...there are three list blocks next to each other...I need the buttons on the same horizontal so all three blocks look the same and are lined up? Please Tuan.

I think I provided code for both questions on another topic...You try checking all

Hi Tuan, yes, but please see attached...the buttons now sit right on the edge of the boxes...I need there to be space under the buttons...as much space between the titles and the top of the boxes, please

@christyprice Hi Christy, hope you're able to help? @tuanphan assisted with a code to bring the buttons into the same horizontal, but now there is now space under the buttons so they sit the same distance as the titles from the top border? Please?

@Iwan you should be able to adjust this without code. In the section settings look under the design tab and then go to spacing- you can adjust all the spacing manually. This should work unless the code you are using overrides it. 

It's okay, I got this right. But @tuanphan please can you help show me how to create space under these buttons:

On 4/10/2022 at 4:23 PM, Iwan said:

It's okay, I got this right. But @tuanphan please can you help show me how to create space under these buttons:

You mean space under buttons?

It's okay, thank you, I figured it out myself 🙂

Btw, @tuanphan, do you know anything about integrating Acuity Scheduling with Squarespace? 🙂

23 hours ago, Iwan said:

Btw, @tuanphan, do you know anything about integrating Acuity Scheduling with Squarespace? 🙂

Hi. I haven't worked with Acuity Scheduling yet. You try asking @christyprice

Thank you very much @tuanphan 🙂

Hi @tuanphan 

Same problem - want to match the sizes for all auto layout cards. 

https://www.decisive-momentum.co.uk/

20 hours ago, AshaDC said:

Hi @tuanphan 

Same problem - want to match the sizes for all auto layout cards. 

https://www.decisive-momentum.co.uk/

 

Hi. What is access password?