Responsive NFT Preview Card

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  To center the main on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  Give the max-width of the main a fixed value instead of a percentage value. e.g: max-width=400px;

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The NFT image alt tag description needs to be improved upon. This is what your users are purchasing. Assume you’re describing the image to someone over the phone.

  • The “Icons” serve no other purpose than to be decorative; They add no value. Their alt tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an anchor tags. The anchor tag will allow users to click on content and have them directed to another part of your site.

  More Info:📚

  MDN The Anchor element

  • The profile image alt tag needs to be improved. It should only state the following; “Headshot of -person’s full name-“

  More Info:📚

  Headshot Alt Text

  • Your CSS Reset is being underutilized. To fully maximize it, you will want to add more to it.

  Here are some examples that you can freely use:

  Josh Comeau Reset

  Eric Meyer Reset

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎄🎁

  0