3 Column Preview
Solution retrospective
Hey mentors,
When my screen size is between 1400px and 1420px the cards are different sizes and I can't get them to be the same size (sized to the largest height). How can I fix this?
Also, is there a better way to handle the button being bottom aligned? I tried a few things, thinking a align-contents: bottom should work but it doesn't. Why?
Many thanks! Kate
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AmodeusR
If you delete margin: auto and height: 100% properties it'll fit correctly all the time. I'm not sure why it is happening, but I do see that margin auto tries to center things vertically, instead of stretching, which is what needs to occur so every card stays the same size all the time, whilst the height: 100% being a relative sizing, change the size of the cards base on the parent size, which is not specified, thus making size goes crazy. Again, not sure why, but that's what causing such problem.
About the button, when you want to push something to as far as it can go, you can just give margin-(direction): auto. For example, if you want to push the button to the bottom of the card, you can either give to the p tag margin-bottom: auto or to the button margin-top: auto. Got it?
I think I made things a little bit confusing, so if you need further explanation, just tell me and I'll try to explain better 😅
Marked as helpful - @correlucas
Congratulations for this great solution Kate! Everything seems perfect and the component is fully responsive. Its amazing to see your progress here.
Keep posting amazing challenges.
=)
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord