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

Responsive NFT Card Component using Tailwind

@NicholasAnich

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


🍃 Hey Everyone!

This was an excellent challenge to learn and try out Tailwind! It was definitely a rough start and a lot of yelling at the computer but glad I pushed through. I can see why people like to use the Tailwind CSS framework.

Please feel free to leave any comment or suggestion on how to go about improving my code.

Thanks! 👽

Community feedback

@amalkarim

Posted

Hi Nicholas, great job on completing this challenge.

I never used Tailwind though, so I couldn't really give you suggestion about that. I think your code is great. The only thing that I found could be improved is the height of the <main> element. When the page is viewed using a mobile phone in a landscape mode (i.e. the height of the browser is shorter than the content), some parts of the card in invisible, and we can't scroll to see it. To avoid that, you can simply remove the class h-screen from the <main>. Also, try to give the body some padding to give a nice breathing room for the card.

Hope this helps

Marked as helpful

1

@NicholasAnich

Posted

@amalkarim Thanks for the feedback! I put h-screen (full vh) on the main so I could center the component in the middle of the screen haha. Would it have been better to use position in this case? Or should maybe flex-box on the body? I'll work on it! Cheers man!

0

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