NFT Card using HTML & CSS

Community feedback

• Account deleted

  Hi again Daniel, congrats on finishing the challenge! 💪

  I would just like to point it how you could make this section with the 'price' and 'days left' work better. You can do this:

  • Wrap both elements inside a div.
  • Select the div within CSS and add this declaration block:

  display: flex;
  align-items: center;
  justify-content: space-between;
  

  This code will push both elements to their sides as much as possible but they won't break into next line. That way you don't need to calculate the margins or anything.

  I hope this helps!

  Keep up the good work.

  Marked as helpful

  1

  ---

  

  Daniel Grec•70

  @DanielGrecPosted over 2 years ago

  @kom42ec Thank you as always! Will get on with the modifications right away!

  1
• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Daniel! Congratulations for you challenge solution!

  I saw your solution and seems great, there's only one detail to fix, the nft price / times left section, I note that you've used display: inline; I'll propose you another approach to align these items.

  1.Wrapp the div right and left inside another div and apply display: flex; flex-direction: row; align-items: center; justify-content: space-between; Lets supose this div class name is "nft-pricing".

  .nft-pricing { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }

  2.After you create this div holder the right and left you can delete the old elements properties and just set the padding for them.

  Try that and say me if works, I hope it helps you bro.

  Marked as helpful

  1

  ---

  

  Daniel Grec•70

  @DanielGrecPosted over 2 years ago

  @correlucas Thank you as always! Will do this right away! I thought about using flex too, but now I see that it was indeed the right approach to take.

  0