NFT Preview Card Component

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Goorezy, congrats on finishing the challenge! you did almost get a pixel perfect solution, great job!

  In your card__nft--cotainer__hover I would add a cursor: pointer to give the user clear intructions that is a clickable!, also increase the time of the effect of the animation to at least 0.5s, it gets smoother in my opinion.

  Also would recomment you to set your body { font-size: 16px } , because you are using html { font-size: 62.5% }, you can perfectly reset back your font-size in the body to 16px and you will still get rem values as 10px.

  Hope my feedback helps you, if you have any question, don't hesitate to ask!

  Marked as helpful

  1

  ---

  

  Goorezy•100

  @GoorezyESTPosted about 2 years ago

  @DavidMorgade I didn't knew that i can reset back the font-size and still get the rem at 10px, I will use that, thanks!

  1

  

  David•8,000

  @DavidMorgadePosted about 2 years ago

  @GoorezyEST Yeah, this is usually the snippet people use at the start of the CSS to work with rems as 10px without changing the body font-size to only 10px.

  html {
    /* 1rem = 10px */
    font-size: 62.5%;
  }
  body {
    font-size: 1.6rem;
  }
  

  I love working with this method, 1rem = 10px is the easiest way to get sizes!

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @DavidMorgade and @GoorezyEST, I don't recommend changing the html or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements. I suggest reading this article by Josh Comeau where he writes about the problem of the 62.5% trick (and more!). Also, I recommend reading what an accessibility expert (Grace Snow) has said about it.

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Goorezy, congratulations for your new solution!

  Your solution seems great, there's only one issue with the card responsiveness. All you need to make the container responsive is to replace width: 30rem; with max-width: 30rem; after change that you'll see the difference, the container will start to contract.

  .card {
      background-color: hsl(216deg, 50%, 16%);
      display: flex;
      flex-direction: column;
      max-width: 30rem;
      border-radius: 1rem;
      padding: 2rem;
      box-shadow: 2rem 2rem 6rem rgb(0 0 0 / 50%);
  }
  

  👋 I hope this helps you and happy coding!

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, Goorezy! 👋

  Congratulations on finishing this challenge! 🎉

  It's good that you are using min-height instead of height on the body element. This way, on mobile landscape view, the users can still scroll to see the full card content. But, I notice that the card is touching the top and the bottom of the page. So, I would recommend giving some padding to prevent the card from touching the edges of the page.

  One more suggestion is to not hyphenate the alternative text (like code). It should be written as the normal text. The alternative text of the image would be pronounced by the screenreaders to help the users understand about the image.

  That's it! I hope this helps! 🙂

  1