Design comparison
SolutionDesign
Solution retrospective
Give me Feedback, Feel Free !
Community feedback
- @Salah1221Posted over 2 years ago
Hi Rian, You did a great job in your solution, but I noticed some improvements that can be made:
- You can remove the annoying space below the image by adding
display: block;
to.cypto
. - Add
white-space: nowrap;
to theh2
headings of.time
and.price
to keep them on the same line. - Add
position: absolute;
to.attribution
to remove it from the document normal flow so it can be positioned easily with respect to the body without interfering with the card. - Center the card in the
body
using flexbox, before doing that the body should have the full height of the view port (giveheight: 100vh;
to the body). - After centering the card you can remove the
margin
,margin-top
, andmargin-bottom
properties from the.container
div so the card would be perfectly centered. And that's it! Happy coding!
1 - You can remove the annoying space below the image by adding
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