Responsive NFT Card Component Using Flexbox

Community feedback

• 

  Mateusz•180

  @userMatMikPosted about 2 years ago

  Hi, I checked your code and you are using pseudo-elements ::before to display icons so if you want to align them you must set position: relative to parent element and position: absolute to ::before element. So for example it should look like this:

  .card__price { position: relative; margin-left: 20px; }

  .card__price::before { position: absolute; left: -20px; top: 1px; }

  .card__date { position: relative; }

  .card__date::before { left: -25px; top: 2px; }

  Hope it helps you.

  Marked as helpful

  0

  ---

  

  polukarp•190

  @polukarpPosted about 2 years ago

  @userMatMik Thanks, that worked for me.

  0
• 

  Alessandra Casole•60

  @alessandra-casolePosted about 2 years ago

  Hi, I also used ":: before" and I solved the problem of the icons' alignment by making the sentences flex, which however I had inserted inside a p class (not span). So by changing the span to a p, you could remove the position properties and you can just give a class to both, so the alignment applies to both and then flex that class. Ex:

  <div class="card__row"> <p class="card-icons" id="card__price">0.041 ETH</p> <p class="card-icons" id="card__date">3 days left</p> </div>

  .card-icons { display: flex; }

  #card__price::before { content: .....; margin-right: .....; }

  #card__date::before { content: .....; margin-right: .....; }

  I hope you find it helpful!

  1
• 

  Divine Obeten•2,415

  @Deevyn9Posted about 2 years ago

  Hi, congrats on completing this project, your solution looks really good, However you'll need to center the container you can do this by: Giving the body a min-height of 100vh, a width of 100vw then you give it a display: grid; and then you place-items: center; to center the container.

  I hope this solves your problem and you find it helpful.

  Happy coding!

  1
• 

  P

  Adriano•42,660

  @AdrianoEscarabotePosted about 2 years ago

  Hi polukarp, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  Example:

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

  The rest is great!

  I hope it helps... 👍

  0