NFT preview card component using CSS

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 6 months ago

  Hey ! great work out there i just notice that you using margin to center horizontally the card component but it doesn't work as i notice , i suggest that you can use display : grid or display : flex with a min-height or height for proper alignment . by adding those css property you properly align the card horizontally . thats all happy coding !

  by adding the display : grid and place-items : center you can achieve to center the card and any future work you create ( you can see the difference when you do zoom-in and zoom-out in your card component )

  body {
    box-sizing: border-box;
    background-color: var(--Very-dark-blue-main-BG);
    font-family: 'Big Shoulders Display', cursive;
    font-family: 'Outfit', sans-serif;
    display: grid; // add this 
    place-items: center; // add this 
    min-height: 100dvh; // add this 
  }
  

  .container {
    background-color: var(--Very-dark-blue-card-BG);
    height: 500px;
    width: 280px;
    margin: 100px auto; // remove this 
    border-radius: 15px;
    padding: 20px;
  }
  

  0