NFT responsive card using HTML and CSS

Community feedback

• 

  Herson•220

  @HersonmeiPosted almost 3 years ago

  Hi!

  You can put the remaining time in the correct position as follows:

  .nft-metrics .time-metrics { margin: 0 0 0 automatic; justify-content: flex-end; }

  Try to enforce the working of the flex-box, whenever you set the flex display on the parent, to affect the working of the children. So, you've already defined the flex display here:

  .nft-metrics .price-metrics, .nft-metrics .time-metrics { display: flex; align-items: center; width: 100%; }

  But as you are working both with price and time, here you cannot work only with the positioning of the children within time. So, you'll only need to go to (.nft-metrics .time-metrics ) to be able to work specifically with time items.

  I hope I managed to make it a little clear, but it has helped me a lot to find the father, see the children I want to change and also see the available space I have to make the changes in the children's position. Using Devtools has helped me a lot with this.

  Good work and keep on studying and creating more projects! ;)

  Marked as helpful

  1

  ---

  

  P

  Malick Roungou•470

  @mroungouPosted almost 3 years ago

  Thank you very much! This has been really helpful. I'll start trying to use Devtools a lot more.@Hersonmei

  1
• 

  Éric Férole•420

  @Eric-FerolePosted almost 3 years ago

  Hi Malick, for the bleeding of the overlay, simply add to your CSS a property display: block; to you <img> tag.

  Keep up !

  Éric F.

  Marked as helpful

  1

  ---

  

  P

  Malick Roungou•470

  @mroungouPosted almost 3 years ago

  Thanks a lot, it worked! @Eric-Ferole

  0