Alignment of Elements Within Collection Item

Hey all,

I’ve run into the issue that posts on my site get misaligned if the titles don’t occupy the same number of lines (very noticeable on this screenshot)

I’ve tried fiddling around with div blocks and flex blocks but my limited expertise seems to be getting in the way. Isn’t there a way to get the image and everything beneath to align to the bottom of the main post wrapper, and the title to align to the top? I think that would solve it (but, again, limited expertise so I might be wrong).


Here is my site Read-Only: Webflow - Icelandic Made Easier

Hi

Is that what you are trying to come up with?

Try to elaborate and maybe attach your image file to show what exactly you are trying to achieve :slight_smile:

Yes! Your image is exactly what I’m trying to achieve. I’m not sure what I can elaborate on, but it seems like you’ve figured it our perfectly. How did you get that?

Hi @sigurdur130 thanks for reply

Read here the great tutorial guide from webflow. If you are unsuccessful feel free to reach out again :slight_smile:

Hi @shokoaviv , thanks for the help!

I watched the tutorial and tried to apply it but had no success. In the video, auto margin seemed to be the silver bullet I’m looking for, but when I applied it had no visible effect :confused:

I tried applying top auto margin on the image block and the link block it’s in. Then I tried putting the image and everything under it into a div block, thinking the div block might act like the button in the video, and applied the top auto margin to the div block. No visible change.

I’m sure I’m just missing some tiny detail and it’s really quite simple, but for the life of me I can’t figure it out!

Hi

I don’t want to change your design, what about taking the photo to the top? :slight_smile:

https://www.loom.com/share/4179ff0a44b244ba9e010429c8c54aa9

Photo to the top pushes the problem down: the post info misaligns, instead of the picture. The picture in your first post looked just perfect, would you be able to run me through on how you did that?

Hi

Use Grid.
https://www.loom.com/share/41936391c37347c98dbe274a6b073d97

Thank you so much! That solves it perfectly =) I knew it was down to something simple my inexperience wasn’t letting me see.

1 Like