NFT card with hover effect

Community feedback

• 

  P

  visualdennis•8,375

  @visualdenniss

  Posted over 2 years ago

  Hello Tinker :)

  Nice job completing the challenge successfully! Suggestions:

  • It looks like the span texts are broken into two lines, but in the design they are all in the same line. A quick fix would be using this: white-space: nowrap; for .num-class .eth, .days (i showed this example to make you aware of this property)

  but there is even a better way, just use align-items: center;

  • .num-class .eth, .days { display: flex; align-items: center; }

  Why better than white-space in this case? Cuz if you notice, while it solves line break, the icons seem to be stretched in height a bit, this is because flexbox by default stretches it. align-items: center; not only fixes the line break but also fixes the stretching of the icons.

  And no, adding gap: 5px as suggested, won't fix it because that is not the issue.

  • Bonus TIP: You can add a transition like transition: all .4s ease; to .equil-img make the overlay appear smoothly.

  Hope you find this feedback helpful!

  12

  Marked as helpful
• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted over 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component needs a bit of padding so add some padding to the main element.

  ---

  • And, the items inside .eth & .days are need to placed side by side but here they are stacked upon each other. We can fix it by following snippet.

  ---

  .eth, .days {
      display: flex;
      gap: 5px;
  }
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  13

  Marked as helpful