Design comparison
SolutionDesign
Solution retrospective
This component was pretty simple so I used only basic html and css. I tried to follow the BEM methodology for the card component, so I would like to have feedback on that. I always try to find the simplest way to do something, using the least amount of code etc. So a few questions:
- I am unsure of the way I am using to center the card. I used flex on body and added a wrapper container to constrain the card. Was my approach good?
- Is there a more simple way to reduce the amount of css?
- What is the best practice for creating card components? Should they have a width/height on their own or should be ready to fill any space they are placed in?
Thanks!
Community feedback
- @PipouwPieuwPosted almost 2 years ago
Hey George!
I think what you did is spot on. 🎉
- Centering the card with flex is the most efficient solution in my opinion.
- You gave the card a max-width which is perfect, this way it fits the design and it still will be able to shrink on smaller screens if necessary.
- I would avoid setting a fixed height because you want the card to be flexible in case its content changes. What you did is good 👍
- I don't think you need to reduce your CSS here. But minifying it usually improves performances, especially on large projects.
Well done!
1
Please log in to post a comment
Log in with GitHub
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