Responsive Card using CSS flex box

Solution retrospective
First one I've completed on this site. Enjoyable start - One issue I had was figuring out how to center align icons and text. Almost got it
Please log in to post a comment
Log in with GitHubCommunity feedback
- @rsrclab
Hi, @thomasjfcaldwell ~
Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.
Here are some of the tips I like to provide.
- Please try BEM for naming element classes. It will help you a lot on bigger projects.
- There is no hover effects on image and other elements. It's also one of challenging part here.
- Font sizes and spacings aren't the same with design. As a front-end developer, it's important to meet pixel-perfect requirements.
https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH
Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.
Cheers ~
Marked as helpful - @darryncodes
Hi Thomas,
Welcome to FEM, good to see you've completed your 1st challenge.
I think you've nailed the centre align icons and text.
display: flex
andalign-items: center;
usually does the trick. I thinkmargin-bottom: 0.7em;
on.equilibrium + .days
in your.cost
div is messing up the alignment there.You should swap
<div class="container">
with<main class="container">
to clear your accessibility report. Using descriptive/semantic html is really importantHappy coding!
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