NFT Preview Card Challenge

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,770

  @jgreen721Posted about 2 years ago

  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•38,390

  @AdrianoEscarabotePosted about 2 years ago

  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