Nft preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi again Brian, congrats on completing this challenge!

  Nice solution as always!

  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-info .nft-stats {
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
      flex-direction: column;
      align-items: center;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Brian Wachira•130

  @ItsWachiraPosted about 2 years ago

  @correlucas 😁 i totally forgot to add media queries, but thanks for the feedback. Still not sure about the overlay eye viewer image, how do I easily implement it with vanilla css? I don't want to add any frameworks for such a small task

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @ItsWachira I did it with vanilla css, following this tutorial: https://www.w3schools.com/howto/howto_css_image_overlay_icon.asp

  I don't remember exactly how I did but was with a pseudo-element and display: none for the hover active/inactive.

  Marked as helpful

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @ItsWachira I did it with vanilla css, following this tutorial: https://www.w3schools.com/howto/howto_css_image_overlay_icon.asp

  I don't remember exactly how I did but was with a pseudo-element and display: none for the hover active/inactive.

  1

  

  Brian Wachira•130

  @ItsWachiraPosted about 2 years ago

  @correlucas thanks for the link, it is helpful. Again, I appreciate your feedback.

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @ItsWachira,

  Nice job on completing the challenge

  You can add the following rule to center the card on the page.

  body {
      font-family: 'Outfit', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  You can also use this on any parent element where you want the child element to be in the center.

  Also add the font-family: 'Outfit', sans-serif; to the body not to individual elements in order for all elements to use that font if that makes sense. Hope this is helpful.

  Marked as helpful

  1

  ---

  

  Brian Wachira•130

  @ItsWachiraPosted about 2 years ago

  Hey @hyrongennike, thanks for the feedback.

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Brian, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • You can fix the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • remove all margin from main-container class
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😉

  Marked as helpful

  0

  ---

  

  Brian Wachira•130

  @ItsWachiraPosted about 2 years ago

  Hey, @denielden, thanks for the feedback.

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  @ItsWachira You are welcome and keep it up 😁

  1