NFT Card Component

Community feedback

• 

  Fatlind Shehu•2,230

  @fatlindshehuPosted over 2 years ago

  I would suggest using a designing platform to measure the height/width & padding/margin.

  • Figma or Adobe XD would do the work!
  • For the CSS part I would accept the victors recommendations.
  • I would recommend avoiding using px as a unit instead I would suggest replacing them with rem

  Happy coding 😀

  Marked as helpful

  0
• 

  Philemon Bahati•580

  @bahati7Posted over 2 years ago

  Hey @anthony

  Good job on this! I'd like just to add few tips:

  first, to perfectly center the card, this code can help:

  .card{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

  secondly, try to increase the width of the card on mobile and reduce the h1 size

  try until it's perfect

  good luck:)

  Marked as helpful

  0
• 

  Viktor Kovács•310

  @victorsonetPosted over 2 years ago

  Hey,

  • If you check the body height by opening Developer tools and hovering over body, you can see right now the body takes half of the screen only, you can change that by adding min-height: 100vh to the body
  • You used flexbox's align-items: center already which will center your card to the middle of the 100vh after setting the min-height as well.
  • Right now the card's width is 25% and the thing with that is that if you change the screen size for 750 pxs for example it will be 25% of 750pxs and its not getting bigger, one way to go around this is setting card width to width: min(25rem, 85%) for example, so until 85% of the page width is bigger then 25rem it will use 25rem, if the 85% becomes less then 25rem the card will use that, basically its always using the smaller value.

  I tried to be more detailed so it serves you a little bit better and I hope it helps you!

  Marked as helpful

  0

  ---

  

  Anthony Becarne•160

  @AbecarnePosted over 2 years ago

  @victorsonet Hey!

  I've done all the changements you recommended to me and it looks instantly better.

  Thank you very much :)

  1

  

  Viktor Kovács•310

  @victorsonetPosted over 2 years ago

  @Abecarne Happy to hear!

  0
• 

  Kevin Copo•150

  @snowbot22Posted over 2 years ago

  If you want to center the card use CCS grid. Using the property place-items:center once your container is a grid, the card will center in your container.

  0