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 preview card component

#sass/scss

@mrfinesse47

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


I used pixel units, that way I could make it pixel perfect to the Figma files. Is it better to use REM/EM or other non-absolute units? then do the math to get it to match the Figma?

Community feedback

@PatrickCuentas

Posted

I think it's better to use REM units that are based on the font size of the root element.

Mainly for accessibility issues since users have different default sizes other than 16px for different reasons.

And when using REM units, the size is based on that default size of each user, which offers a better experience.

I am not an expert, but I hope you can use my suggestion for a broader search on the subject.

Greetings ✨

Marked as helpful

2
Old 6,240

@Old1337

Posted

Hi There, Great Job On This One.

i notcied the element is not centered in the page properly so, you can do it with giving the body

display:flex, justifiy-content:center, align-items:center, min-height:100vh

Marked as helpful

1

@mrfinesse47

Posted

@Old1337 hi which element is it? also what would setting height have to do with centering? oh you mean vertically.. thanks. For sure i noticed this but kind of thought it was redundant as this is only a component card and not an actual website. But looking at it, it does look awkward in the comparison being so high up, so I will set it to center vertically. thanks for the comment.

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