NFT-preview-card-component

Community feedback

• 

  Fancy•320

  @maciejkrol18Posted about 2 years ago

  The 'attribution', or 'attribute' as you referred to it, is something you'll find pre-written in the HTML file of every Frontend Mentor project. It's just a suggested way of signing your work, so to speak. You can delete / comment it out if you want.

  As for your code, it's pretty readable, although i've got some suggestions for you to consider:

  1. Why not simplify that article tag on line 37 in your .html file? It's not really readable when everything's on the same line.
  2. Remove the default margin from your body tag (add margin: 0) and add min-height: 100vh to it. The vh unit means viewport height, so your body tag will take up the entire screen, which makes the card properly centered.
  3. Some of your CSS variables are lowercase and other ones are camel case. You should make it consistent by picking one of the two. On the topic of variables, what is that margin: 0 and padding: 0 in the :root?
  4. I'm not really sure about that <ul> tag used in the nft's price and days left. I would replace it with simple flex container.

  That's all i could think of for now. Overall, good job on your first project!

  Marked as helpful

  0
• 

  P

  Justin Green•2,770

  @jgreen721Posted about 2 years ago

  Nice job on the challenge!

  Yea I find the attribution tag can sometimes be a nuisance/eye-sore to the rest of the design but it does allow a developer signature of some-sort if exercised...I usually give it a position of absolute and bottom:0 which should kick it to the bottom of the screen and then give it width of 100% and text-align:center so its just centered at the bottom and generally out of the way. Obviously there are other ways to achieve that but ya, bottom center I think is where you're aiming at. Don't think its a huge deal to just comment it out though either. 🙂

  Marked as helpful

  0
• 

  Niroyan•410

  @yanniro2Posted about 2 years ago

  try this your container should be aligned in the center is the perfect one body { width: 100vw; height: 100vh; display:flex; align-items: center; justify-content: center; }

  container{ min-width: 375px; min-height:400px; }

  Marked as helpful

  0