NFT preview card component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

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

  • To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the Main Element.

  • The “NFT Image” is not decorative; it is the product. It should have an Alt Tag with a description; Assume you’re describing the image to someone.

  • The profile image is not decorative. Its Alt Tags should not be blank. It should state the following; “Headshot of -person’s full name-“

  • 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.

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

  Happy Coding! 🍂🦃

  1
• 

  blue-mariposa•110

  @blue-mariposaPosted about 2 years ago

  Hey @Mzu-Soci! I viewed your site and code and i'd like to make the following suggestions;

  • The component was not centered on the page so you can try below code to center it:

  .container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  

  • Add @media query to make it fit better on small screens

  @media only screen and (max-width: 600px) {
    
    .content-box {
      width: 350px;
    }
  }
  

  Great work though.

  0