NFT Card Component using Vanilla CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi Dan, congrats on completing this challenge!

  Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @igafshell,

  Congrats on completing the challenge

  No real right way you just have a different solution for the same problem. If you wanted to add a transition you would just need to swap out the display: none for opacity: 0 as the display property can't be animated.

  Below is my solution I used the pseudo elements. my solution

  Marked as helpful

  1

  ---

  

  Dan•150

  @igafshellPosted about 2 years ago

  @hyrongennike Thanks, now that you mentioned animation, I might actually add one to the image hover effect.

  0