Misaligned project tiles

Hello,
here is the link to my project: https://codepen.io/anna_drewing/pen/GRrWeoQ
It has passed the last Responsive Web Design test, but I see that the miniatures representing my projects are not aligned at the same height. I would like their top-lines to be at the same height, but I do not know how to achieve that.
I hope I can get some help.

  • Anna

The issue is that your figcaptions have different heights. You can test this by adding a little more text to your first one to get it to wrap to a second line.

One quick and dirty way to fix this would be to make a fixed height for the figcaption. I found 40px worked well.

There are other ways to handle this. You could wrap the figcaption in a div with a fixed height and then center or top justify your captions to that.

You could probably tell the container of the figures to top justify its contents.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.