Design comparison
Community feedback
- @correlucasPosted over 2 years ago
👾 Hello Lukas, congratulations for you solution!
Your solution seems pretty good, you've done almost everything, I'll list you some few details to adjust, but note that the hard work is already done.
1.The container size is a little bit too big in comparison to the design files, you've used
max-width: 500px
and this card size ismax-width: 350px;
2.This is a tiny tiny tiny(but important detail), look the section with the ethereum price / days left, the icon and the text are not aligned vertically, you can see that if you look the
alignment
of the watch icon. To fix that you've to add to the<li>
some flex properties in order to align them, see the code below:li { display: flex; align-items: center; justify-content: center; }
3.Super responsive elements, if you want to give a final touch to your card component, you can set a
media query
allowing the price section to change the flex-direction saving space and putting each <li> in different rows. See the code below:@media (max-width: 280px) {article ul { display: flex; flex-direction: column; }}
👾 I hope it helps you and congrats for you really good done solution!
Marked as helpful0@malyrudyPosted over 2 years ago@correlucas Thank you Lucas I really appreciate your help! :)
1 - @purnimakumarrPosted over 2 years ago
Hi Lucas, your solution looks really good. There is some gap below the image, which you can see when hover over it, this is beacuse the
<img />
is an inline element. You can get rid of that by usingdisplay: block
on the<img />
. Other than that, great effort!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