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 Challenge

Mark 250

@markskwid

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


Drop some tips in the comment section. I appreciate it and it will help me a lot. Thank you! :)

Community feedback

Account Deleted

Hello @markskwid,

Your solution is almost done and I suggest you use Flexbox or CSS Grid to center your card in the middle of page:

Using Flexbox layout:

body{
  display: flex;
  align-items: center;
  justify-center: center;
 min-height: 100vh;
}

Using CSS Grid layout:

body{
  display: grid;
  place-content: center;
  min-height: 100vh;
}

I hope this helps you

Marked as helpful

2
P
Justin Green 2,710

@jgreen721

Posted

Hey, congrats on finishing the challenge! Nice work on the overlay hover image.

My only suggestion is it looks like you're using % a fair amount for your height/widths but I believe?? without a specific size units on any parent containers, children elements will be a little lost on the context of what % actually translates too...IOW, your NFT content card's width can skew a bit upon screen resizing. There's a lot of ways to skin that cat but an easy solution is just setting a hard-set min/max size values (ie min-width:400px). Again, plenty of other approaches but, just a suggestion to fix the card from becoming too thin. Happy Coding!

Marked as helpful

2
Adriano 33,980

@AdrianoEscarabote

Posted

Hi Mark, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

  • To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

Example:

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

The rest is great!

I hope it helps... 👍

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