NFT-PREVIEW-CARD

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Oyindamola, great job here working on this :) Here are some suggestions that you can try:

  First, I see that you used a 100px top and bottom margin, probably to space things out. It's always best to try to use grid or flexbox first for position, and in your case it looks like you want some extra space around the component. You can try centering the component instead by writing this in your body selector:

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

  I also suggest putting the main font color on the body here since it looks like you haven't used it yet.

  If you try the above in the body, you'll find that your overlay will have shifted. For the overlay, since you got a position: absolute on it, you should ideally have a position: relative on the parent container, which in this case is .card div. Otherwise, the browser would go to the topmost element, which is usually the body if nothing else has position: relative. After setting the position: relative on .card, change the top to 20px instead, since that's the width of your card padding.

  Hope these suggestions help you out a bit!

  Marked as helpful

  0

  ---

  

  Oyindamola•280

  @OyinaladePosted over 2 years ago

  @elaineleung Thank you

  1