CMS Items are not aligned correctly when there's too much text

Community resources Webflow Tips
1

Hi,

I’ve been making my own CMS collections on my website recently, but I keep running into an issue where the layout becomes inconsistent depending on aspects like the number of words per item.

https://preview.webflow.com/preview/symetrica?utm_medium=preview_link&utm_source=designer&utm_content=symetrica&preview=4bae1a5f8de4b1ce441777a5d08e39c7&pageId=668d0e56716537795fc65be8&locale=en&workflow=preview

As shown in the link above, one item in the collection is slightly longer than the others due to their longer job titles.

Is there a method of making the size of CMS Items uniform so I don’t keep running into this issue?

I’m still relatively new to Webflow.

Thank you!

2

You have to decide what you want for your layout.
If you want all of the cards to be the same height, but the # of lines of text to vary, you could;

  • wrap the text in a DIV and set a min-height on it
  • use CSS line-clamping to establish a maximum number of rows of text, which will end in ellipses if the text exceeds that
  • just let the cards vary in height organically, but top-align them

Or some combination of all of these.

3

In your case, I agree with @memetican - setting a minimum height would probably be the best bet.

For other situations (like blog post descriptions), we made this free script that allows you to truncate text easily.

It also works with rich text! :)