NFT Product Card with CSS Flexbox

Community feedback

• 

  T.Praveen•870

  @gwtpraveenPosted over 2 years ago

  congratulation on completing the challenge. to align the svg with the text, use display flex and align items center.

  .flex-item {
      display: flex;
      align-items: center;
  }
  
  .cyan {
      margin-left: 8px;
  }
  

  try not to use height instead use min-height

      body {
      min-height: 100vh;
  }
  

  Marked as helpful

  1

  ---

  

  Kylee Bustamante•90

  @kyleebustamantePosted over 2 years ago

  @Tim5583 Awesome, thanks for the extra tip!

  0
• 

  George Stawowczyk•210

  @Jorgus1710Posted over 2 years ago

  Apply the following code to your "flex-item" div into CSS and it should do the trick:

   display: flex;   
   align-items: center;
  

  By setting display to flex, it sets the items to row by default, and then the "align-items: center" is what's going to line those items up the way you want them to.

  Marked as helpful

  1

  ---

  

  Kylee Bustamante•90

  @kyleebustamantePosted over 2 years ago

  @Jorgus1710 Nice! Thank you, I was overthinking this for sure..

  1
• 

  mycrochip•460

  @mycrochipPosted over 2 years ago

  Hello Kylee,

  Well done on completing the challenge.

  I have completed the challenge as well. My hack was to use a pseudo-class. I chose to see them as bullets and placed the icons (.bullet) relative to their texts the following way:

  .bullet1::before { content: url("images/icon-ethereum.svg"); position: relative; left: -5px; top: 3px; }

  .bullet2::before { content: url("images/icon-clock.svg"); position: relative; left: -5px; top: 3px; }

  You can see my solution here: https://github.com/mycrochip/nft-preview-card.git

  Marked as helpful

  0

  ---

  

  Kylee Bustamante•90

  @kyleebustamantePosted over 2 years ago

  @mycrochip I wouldn't have thought of that, but it makes your HTML super clean. Thanks for the insight!

  1
• 

  Samuel Pletain•390

  @samuelpletainPosted over 2 years ago

  Congrats on finishing this challenge Kylee! Your code looks clean and your solution looks great on both mobile and desktop views. Just a personal preference: I would add a margin-top when viewing on desktop to push your card off the top a bit. You can use the vertical-align property to adjust the vertical alignment of your svgs. https://developer.mozilla.org/fr/docs/Web/CSS/vertical-align

  Marked as helpful

  0