Aligning collection list items

Design help Layout & Design
1

I have a collection list for a blog and on the directory page, I have designed it so it is pulling in an image, two headings, a content description, and a date.

However, the headings and content description are different lengths so they result in the different entries on the directory page being unaligned.

Is there a way to adjust this so that the content description will always start on the same horizontal line and so that the date will always start on the same content line.

The header and image are okay so far because they are all roughly the same size but the problems start when we get to the header.

I have shared the preview link below.

Here is my site Read-Only: [LINK][1]

2

Your best bet is to decide exactly how much space you want to give to your text items, and apply a fixed height like 4.5rems. Then use overflow: hidden and CSS line-clamping to display ellipses when text overflows.

image

For the ellipsis you can use the Sygnal Attributes HTML lib,
Or Emil has the CSS in his cloneable here.

1 Like
3

Setting height with REMs worked. Thank you.