Responsive Card using CSS flex box

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 ~

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 and align-items: center; usually does the trick. I think margin-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 important

Happy coding!