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 a little Flexbox

Lidia 280

@lidimi

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


Hi, it's my first chellenge. I am open to any feedback

Community feedback

@ajsaule

Posted

I noticed that below your 800px breakpoint the image is off-center, it would be worth looking into using flexbox to fix the alignment of the hero image.

.card {
    width: 95%;
    display: flex;
    flex-direction: column;
}

I would also give the image a min-width: of pixels so that it doesn't resize to be too small on the desktop view.

Here is a good resource for learning the basics of flexbox

Otherwise, great job, looks good :D

Marked as helpful

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