NFT preview card

Community feedback

• 

  turtlecrab•550

  @turtlecrab

  Posted about 3 years ago

  Hey, kudos for making it pixel perfect(I think it lacks font-weight: 600 for heading and price though), but the layout only works for 2 exact screen widths that you hardcoded in css for body, for any in-between sizes the design is pretty much broken.

  In your case the fix is very easy: just remove width, height and min-width from the body and set min-height to min-height: 100vh. This is a standard approach to center both vertically and horizontally with flex:

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  

  In general, we never want to hardcode body sizes like you did, we want our designs to be responsive(google responsive/adaptive design) so our site/app is looking good on every screen size. This is our first priority, and we must test our apps on all screen sizes(we can do it in Chrome DevTools or just simply by resizing our browser window). Making it 100% pixel-perfect is a great goal, but it's more or less among our last priorities.

  Hope that helps.

  31

  Marked as helpful
• 

  Patrick Cuentas Mariano•260

  @PatrickCuentas

  Posted about 3 years ago

  Good Work, Pixel Perfect style. Keep up coding. Happy coding :)

  10