Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CSS Grid, HTML5

@lordlughas

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@najeeb-anwari

Posted

Hello Charles Lughas, I hope this is helpful. Your design is great but here is what I think you should do to solve some issues.

  • The meta tag to display the site properly based on user's device is written wrong. To solve the issue change the meta tag to this <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Wrap the contents with <main> tag to make it more semantic.
  • Do not use percentage for border-radius. Use fixed units like px or rem.
  • Always use device toolbar on developer tools to test your design on different device or screen sizes.
  • If you want, you can check my solution to understand how I did it. https://www.frontendmentor.io/solutions/nft-preview-card-component-using-flexbox-HJD8mOq89

Marked as helpful

1

@lordlughas

Posted

@najeeb-anwari Thank you for your feedback. This is really helpful. I am implementing this to help improve my design.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord