Alignment of 'read more' text

Something’s not right with this and I can’t figure out what - how do I make the ‘read more’ text in the same position (bottom left) of each collection item?

i.e. not like this:

Here is my site Read-Only: Webflow - Better Meetings

wrap heading paragraph and read more button in a div and set it position relative and set the button position absolute and set it bottom 2%

1 Like

Hi Steve! Found a way to make sure your Read more → link stays at the bottom.

  1. Remove the Auto margin on the bottom of the Collection Item*
  2. On the Read more → link, remove the Sizing on the Flex child properties
  3. Add Auto margin to the top of the Read more → link

*If you don’t want to remove Auto margin on the bottom of the Collection Item, you can set the Collection item’s height to 100% instead!

Your layout should look something like this now:

There’s an example of something similar taught here on a Webflow University video.

With this, we’ve fixed the Read more → link, but the content in the Collection Item is still uneven. This is because the heading and paragraphs are different sizes based on the content. Here’s a way to align the heading and paragraph across your Collection Items more:

  1. Add a Div block underneath your blog-card_content-wrapper inside your Collection Item
  2. Drag your paragraph cms2_title and your link Link 9 into this Div block
  3. Add Auto margin to the top of your Div block
  4. Set the Div block’s display setting to Flex
  5. Set the Div block’s flex direction to Vertical
  6. Add a Min H to your Div block, like 145px

Your CMS items should look something like this below:

Hope this helps, but if not, let us know!