How to make Summary Blocks the same height

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 

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!

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. 

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!

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!