NFT Preview Card Component

Community feedback

• 

  Lucas 👾•104,340

  @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 is max-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 helpful

  0

  ---

  

  Lukas Rucky•160

  @malyrudyPosted over 2 years ago

  @correlucas Thank you Lucas I really appreciate your help! :)

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @malyrudy you're welcome Lukas✌️

  0
• 

  Purnima Kumar•390

  @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 using display: block on the <img />. Other than that, great effort!

  0

  ---

  

  Lukas Rucky•160

  @malyrudyPosted over 2 years ago

  @purnimakumarr thank you so much! 😊

  0