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

NFT preview card component

@HovenWebdesign

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


What are you most proud of, and what would you do differently next time?

I tried to use modern css to create the card. I would like to get feedback on design, usage of html and css. If you have any other feedback, I would like to hear it too.

Community feedback

P

@wonderlust101

Posted

Looks good but a little tip in the future if you decide to use a reset.css or normalize.css. You can use:

width: min(xrem, 90%); //Where x = size of container

What this does is choose the lowest value of the two. This means that on wide monitors it will be equal to:

width: xrem; //Where x = size of container

and on smaller monitors it will be like:

max-width: 90%; 

While it only saves you from writing one line, its still pretty useful in other applications outside of container width. Its compatible all browser except IE but if you care about accessibility, I recommend not using it.

Browser Support: https://caniuse.com/?search=min

Source: Kevin Powell - Youtube

Marked as helpful

0

@HovenWebdesign

Posted

@wonderlust101

Thank you for the feedback I will look in to it!

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