Jump to content

How to make Summary Blocks the same height

Recommended Posts

I'm trying to make the summary block height responsive to the 'longest title' of the displayed blogs.

I currently have .summary-content {height: 20vh;} achieving an even height but if the title of new blogs is shorter or longer there will be issues.

How to I target the title and ensure it is responsive in the future?

premierleads.io/artur-test-page 

 

Screen Shot 2022-11-24 at 1.35.07 pm.png

Edited by studionew
Link to comment

Tricky problem, you'd need to write some script to measure the character length of the title and then have a responsive height based on the estimate number of line, not the easiest solve. 

Alternatively you could put a clamp on the title line count and match the max height to that, something like this:
https://stackoverflow.com/questions/26973570/setting-a-max-character-length-in-css

Or you could just request your client not to put very long titles... that can actually work!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
19 hours ago, Ziggy said:

Tricky problem, you'd need to write some script to measure the character length of the title and then have a responsive height based on the estimate number of line, not the easiest solve. 

Alternatively you could put a clamp on the title line count and match the max height to that, something like this:
https://stackoverflow.com/questions/26973570/setting-a-max-character-length-in-css

Or you could just request your client not to put very long titles... that can actually work!

Thanks for your response and suggestions.

I'm really hoping to find a solution for the height to respond to the title length.

I absolutely agree that the easiest solution is for my client to not put long titles but unfortunately my client doesn't want to do that. 

Link to comment

Yes, problematic! Sadly I've not found any solution to this, but if you know the titles are going to be long then leave the space for them, keep a nice small font, and hope it doesn't get broken!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Hey @studionew!

If I understand correctly what you're trying to do, you can apply flexbox to the summary block to make the height adjustment automatic vs. setting a manual height value for the title container.

Here's the snippet you can use for Grid Summary Blocks:

.sqs-gallery-design-autogrid .summary-item-list {
  display: flex;
  flex-wrap: wrap;
}
.sqs-gallery-design-autogrid .summary-item {
  display: flex;
  flex-direction: column;
}

Keep in mind the code as is will apply to ANY Grid Summary Block you have on the site.

Hope that helps!

Squarespace Customization Geek | Helping fellow designers code the heck out of Squarespace

☞ Get the free Squarespace Coding Essentials guide to reach that next level of customization you're aiming for.

☞ Check out all the plugins & mini-courses and masterclasses available to help speed up your projects.

☞ Looking to outsource a customization or fix? I'd love to help you out. Get in touch!

 

Website | Youtube | Facebook | Pinterest

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.