NFT Preview Card Component using Vanilla CSS and Flex

Community feedback

• 

  kristi•130

  @kristiingcoPosted over 2 years ago

  Hey there! First off, great solution.

  Using flex on the parent divs (your divs with the class of ".price" and ".time") will allow you to align the text and their respective images.

  .price {
    color: var(--cyan);
    font-size: 1rem;
    font-weight: 400;
    display: flex;
  }
  
  .time {
    color: var(--soft-blue);
    font-size: 1rem;
    font-weight: 300;
    display: flex;
  }
  

  This, however, will result in the icons being "squished", due to the default alignment of the items being set to stretch. Thus, you have to add the "align-self" property to the CSS declarations you did for the icons.

  .time img,
  .price img {
    margin-right: 0.25rem;
    align-self: center;
  }
  

  I cloned your repo and added the above changes and it should look like this!

  1

  ---

  

  Kate•170

  @YayoKBPosted over 2 years ago

  @kristiingco Thanks! Adding flex worked :) Such a simple fix...

  0
• 

  Mel•225

  @Mel1207Posted over 2 years ago

  Hi

  you can try this properties and target these class .price and .time

  • display: flex;
  • align-items: center;

  Hope it helps and great job for this work!

  1

  ---

  

  Kate•170

  @YayoKBPosted over 2 years ago

  @Mel1207 Thank you! This worked.

  0