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 Card with CSS (flexbox)

@AdamElitzur

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


Is there anything I should be doing differently? I use flexbox a lot, is there a better way I should be centering things? (Like the eye icon when you hover over the image, and the price and ETH icon and time and clock icon) Thanks!

Community feedback

Liam R 425

@Cooly-o-Cats

Posted

This solution is great! Flexbox seems to be the right way to go in most of these situations for the design. The only thing I would change is giving the card a margin between the top and bottom of the screen!

Marked as helpful

1

@AdamElitzur

Posted

@Cooly-o-Cats thanks! When you say margin between top and bottom, what do you mean? I still need it if I used flexbox? Also, when it says I need to have a mobile version, do I have to use media queries or is it fine how I did it where it auto resizes?

0
Liam R 425

@Cooly-o-Cats

Posted

@AdamEli Sorry, I made it seem quite confusing the flexbox seems to be working fine now, but when the height of the screen is too small some of the card gets cut off. You can fix this by changing the body's height: 100vh; to min-height: 100vh. Hope this helps!

Marked as helpful

1

@AdamElitzur

Posted

@Cooly-o-Cats Oh, I saw it doing that and wasn't sure why. But why min-height and not max-height? Also, what I said before, do you know if I need media queries? Thanks so much!

0
Dev Rathore 2,600

@GitHub-dev12345

Posted

used this CSS Property in your card to increase and decrease the size of card: 1.In Card design CSS Code Used this: transform : scale(0.9); large size for increase the number of scale & small size for decrease the number of scale

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