Blog Post with varying title length not causing my posts to not line up!

Joshwebflow · February 20, 2018, 5:06pm

Hi Guys,

I’ve created a dynamic blog list, that pulls both the image and the title from a collection.

However due to my blog post titles varying in length, my blog post aren’t lining up.

Any solution to get around this?

All help appreciated

mistercreate · February 20, 2018, 5:20pm

Definitely a great question.

Something similar has been answered by the awesome @vincent, and you can view his response at the following:

For your issue in particular - you can do the following:

Make the width of “Blog Post Title” 100%
The height of “Blog Post Title” 2rem
Add overflow:hidden
And finally, add the following to your custom code:
.blog-post-title {
text-overflow: ellipsis;
white-space: nowrap;
}

You can view the steps, and the results, in the following quick video:

Hopefully this helps, and feel free to reach out if you have any questions.

Best regards,
Micah

philippe · February 22, 2018, 11:37pm

Hey,

This should do the trick:

.

Collection List:
-Display flex
-Wrap Children

mistercreate · February 20, 2018, 5:35pm

@Joshwebflow - @philippe definitely has the better solution using flexbox

Good stuff!

Joshwebflow · February 21, 2018, 2:25pm

Amazing! Thank you everyone.

Much appreciated.