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

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?

https://preview.webflow.com/preview/stephane-lustig?preview=f7828b14b24de8ab02b1a23b55cf9117

All help appreciated

1 Like

Hi @Joshwebflow,

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:

  1. Make the width of “Blog Post Title” 100%
  2. The height of “Blog Post Title” 2rem
  3. Add overflow:hidden
  4. 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. :blush:

Best regards,
Micah :nerd_face:

2 Likes

Hey,

This should do the trick:

.

Collection List:
-Display flex
-Wrap Children

2 Likes

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

Good stuff! :blush:

2 Likes

Amazing! Thank you everyone.

Much appreciated.