Responsive NFT Preview Card

Community feedback

• 

  hitmorecode•6,620

  @hitmorecodePosted 4 days ago

  Congratulations well done. Just a few things

  • The card is not centered on the page. That's because the height of the body is adjusting to the height of the content. You can fix this with these lines in your CSS

  body {
    background-color: var(--background-color);
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
    // add this lines
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  // for this to work, remove the margin on the card
  
  .card {
    background-color: var(--card-background-color);
    display: flex;
    flex-direction: column;
    height: 33.94rem;
    width: 20.44rem;
    margin: 3.88rem auto; // remove this line
    border-radius: 0.94rem;
  }
  
  

  • For a smoother hover animation add transition to the element.
  • I've noticed that you have been calculating px to rem. There is a simple trick to do this without having to convert pixels to rems. This is how you can do it.

  :root {
     font-size: 62.5%; // add this line to your root
  }
  
  body {
     font-size: 1.6rem; // add this line to your body
  }
  

  By doing this you are converting pixels into a 10 based value. So now all you have to do is divided the number of pixels by 10 and you have the value in rems. For example font-size: 25px; in rems this would be font-size: 2.5rem. I hope you find this helpfull Keep it up 👍👌

  Marked as helpful

  0

  ---

  

  P

  Brian Meinert•160

  @bmeinert8Posted 3 days ago

  @hitmorecode Thank you for your input. Greatly appreciate your time, and what you have to offer. Will go back in and implement these suggestions to play around with, as well as for future use in others. Thanks again!

  0
• 

  P

  Brian Meinert•160

  @bmeinert8Posted 4 days ago

  Unsure why the screenshot is moving the price and time left to 2 lines. It does not do this on the live site. Tested on Mozilla Chrome and Edge, as well as on many devices using responsively app, and all pan out in a single line.

  0