NFT card with hover effect

Community feedback

• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year 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!

  Marked as helpful

  1

  ---

  

  Taruna•305

  @Tiyana19Posted over 1 year ago

  @visualdenniss Thank you so much for your suggestion.

  just want to ask you if I had used that property white-space, than what tag I had to use to wrap that icons?

  I have updated my solution with align-items: center.

  0

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @Tiyana19 On .num-class .eth, .days

  You can play around with the examples here to see what effect it does with which value: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

  Marked as helpful

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year 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!

  Marked as helpful

  1

  ---

  

  Taruna•305

  @Tiyana19Posted over 1 year ago

  @0xAbdulKhalid Thank you so much for your recommendations

  I have added the gap: 5px property,

  but I have doubt that I used the margin-left property on the icons , and it works the same as gap then what's the difference between them?

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @Tiyana19

  I recommend you to watch this example "Gap Is Better Than Margin and Here’s Why" youtube video to understand how gap is more efficient than margin or padding

  Hope am helpful, feel free to ask any further doubts

  Marked as helpful

  1

  

  Taruna•305

  @Tiyana19Posted over 1 year ago

  @0xAbdulKhalid Thanks a lot

  0