Streaming live at 10am (PST)

Align an element in the bottom of a card

Hello!

I’m having trouble aligning content within cards, I want the bulleted content to align to the bottom and the image to align to the top.


Here is my site Read-Only:


here’s another screenshot

You could do this by doing the following:

  • Set a min-height to the wrapping boxes. In my example I set it to 600px
  • Set the wrapping boxes to “position: relative”
  • Set the “Card Service Grid” to “position: absolute” and position them to the bottom
  • Add a margin / padding to the “Card Service Grid” boxes similarily to how they were before

Screenshot_10

*I should add that you probably should tweak the min-height to get them to look a bit nicer than in the example above :slight_smile:

Amazing! Thank you!!

Would you know how to do the same thing to a card with an image? When I follow the previous instructions, it stretches the image.
I’m trying to align the line and stats to the bottom.

Sorry, here’s an updated version, the “Million” was too long for that section.

Hey,

do you mean something like this?

I did the following:

  • Set a min-height for the card-wrapper (in my case 700px)
  • Set the card-wrapper to “position: relative”
  • Wrap the divider-line the “Case Study Card Results Grid” in a div block
  • Set the new div block to “position: absolute” and align to the bottom
  • Add padding to the new div block