Menu icon Foundation
Responsive Flexgrid cards

I'm trying to create a responsive card so it will not stack when on mobile (allowing it to be more condensed vertically). I'm getting stuck when I add the "card-divider" to the cards. I want them to align to the bottom of each of the cards using "flex-container".

In this example you can see how it isn't doing quite what I'm hoping. https://codepen.io/JWhiteford/pen/RVrJLj

Has anyone done responsive flexgrid cards? This is my first trial with flexbox.

 

Thanks,

flexgrid

I'm trying to create a responsive card so it will not stack when on mobile (allowing it to be more condensed vertically). I'm getting stuck when I add the "card-divider" to the cards. I want them to align to the bottom of each of the cards using "flex-container".

In this example you can see how it isn't doing quite what I'm hoping. https://codepen.io/JWhiteford/pen/RVrJLj

Has anyone done responsive flexgrid cards? This is my first trial with flexbox.

 

Thanks,

Rafi Benkual about 1 month ago

Looks like you are missing the .card class. Oh no, it's in the wrong position. Cards should be inside columns:

 

https://codepen.io/rafibomb/pen/JNXOJr

 

Jeremy Whiteford about 1 month ago

Thanks but I'm looking to have the card image slide to the left of the .card-selection on small media query. I assumed I needed to do that with columns?

I haven't used flexbox before so maybe my lack of knowledge with it is why I am not achieving what I'm hoping for.

Cards can't have columns within them?