NFT preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Rob Meijer, Congratulations on completing this challenge!

  I’ve few suggestions for you that you can consider adding to your code:

  1.Add transitions to make the interaction smoother while the element gets hovered, you can use a value like transition: all ease-in 0.5s.

  2.To reduce your CSS file and improve the performance of loading your page you can use a tool called CSS minify that reduces the CSS code by removing the unnecessary characters. You can use a VSCode plugin called minify css or this website tool to reduce your code: https://www.toptal.com/developers/cssminifier

  3.To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  .card-row {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-small);
      flex-direction: column;
      align-items: center;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Rob Meijer•100

  @robmeijerPosted about 2 years ago

  @correlucas Thanks for your amazing feedback as always!

  I left out any specific mobile responsiveness as it appears fine on mobile, but your solution looks really elegant. Will definitely give it a try.

  1