Jump to content

New Auto content blocks/lists equal height?

Recommended Posts

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

 

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

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;

}

}}

 

cards.png

Link to comment
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;

}

}}

 

cards.png

Try this

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

 

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

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:

1572130363_ScreenShot2022-03-29at4_24_06PM.thumb.png.9dc82054097e6d6d1ccd9b901cc1f22a.png

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment

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

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
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?

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

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

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

Edited by christyprice

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment

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.