Jump to content

Align body text in list section

Go to solution Solved by Roselion,

Recommended Posts

Hey guys - when I have titles that have different spacing, the body section shows up at different heights. Does anyone have any code that could keep these sections level at all times, regardless of the title?

section[data-section-id="66be54d7287a417a3ad17213"]

Thank you!

Screenshot 2024-08-20 at 2.16.18 PM.png

Link to comment
  • Replies 5
  • Views 515
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Not exactly as you are hoping, but you can change this a little. Each of the sections are independant, so the one on the right doesn't know how long the title on the left is. This means that you can only get these to be even by forcing a property on all of the titles to make them all the same, either by limiting the length of the title (which would involve cutting off the title text if it extends to 3 lines, not ideal) OR by setting a minimum height for the titles (but this adds white space even when it's not needed, and only helps up to a point, if you put a much longer title in it will break).

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

 

10 hours ago, Ziggy said:

Not exactly as you are hoping, but you can change this a little. Each of the sections are independant, so the one on the right doesn't know how long the title on the left is. This means that you can only get these to be even by forcing a property on all of the titles to make them all the same, either by limiting the length of the title (which would involve cutting off the title text if it extends to 3 lines, not ideal) OR by setting a minimum height for the titles (but this adds white space even when it's not needed, and only helps up to a point, if you put a much longer title in it will break).

I think that I've figured it out. I attempted to make the title equal lengths to even it out (it seems the correct avenue for now) and the following code seems to make that happen. Do you have any other suggestions or do you think that this is possibly the best I've got?

 

[data-section-id="66be54d7287a417a3ad17213"] {
}
.list-item-content__title {
    min-height: 100px;
}

 

https://heptagon-pineapple-yktx.squarespace.com

 

 

Thanks!

Link to comment
11 hours ago, Roselion said:

I can't view your website because it's not published or unpublished and password-protected.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
5 minutes ago, Roselion said:

Ahh right, sorry - I forgot that it isn't published. It ended up looking in line. Thanks!

Yes, that looks okay. Are you happy with how it holds up on various screen sizes?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.