NFT Preview Card Challenge

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

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!

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... 👍