Design comparison
Solution retrospective
What should be improved?
Community feedback
- @VCaramesPosted about 2 years ago
Congrats on completing this challenge!
I noticed that you're using the Line Break Element <br> incorrectly. This element is used for making a line break in texts.
https://www.w3schools.com/tags/tag_br.asp
To create the space between the main text and the author section, you should use margin.
Marked as helpful0 - @correlucasPosted about 2 years ago
👾Hello Ionut Patrascu, congratulations for your new solution!
Your card component is just perfect, all the design specs are matching, one thing you can improve is the responsiveness, in this challenge you don't even need a media query, to manage the responsiveness of the card all you need to do is replace the properties
width
andmax-width
and you'll not how you card will behave.Here's some changes I did for your code:
@media only screen and (max-width: 600px) .card { max-width: 15rem; } .card { max-width: 20rem; padding: 1rem; border-radius: 15px; background-color: hsl(216deg, 50%, 16%); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
👋 I hope this helps you and happy coding!
0
Please log in to post a comment
Log in with GitHubJoin 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