Product Preview

Community feedback

• 

  Khaya•300

  @khaya05Posted about 2 years ago

  Hey Natasha👋🏽

  For flexbox to work, you must have a parent/container element, which in your case is <div> with a class name card.

  Then inside your parent element, you can add all the elements that you want to display flex. For this project, you want to have a two-column layout. Therefore you must have only two child elements inside .card ie

  <div class="card">
    <div class="card__left"></div>
    <div class="card__right"></div>
  </div>
  

  Then inside your .card__left you can the product image and on the .card__right add all the product info i.e

  <div class="card">
    <div class="card__left">
      <img src="" alt="" />
    </div>
  
    <div class="card__right">
          <h2></h2>
          <h1></h1>
          <p></p>
          <p class="current-price"></p>
          <p class="original-price"></p>
          <button type="button"></button>
    </div>
  </div>
  

  Then in your .css

  .card {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  

  Also, check out this video by Kevin Powell. It will show you how to use flexbox and how to analyze a design.

  Hope this helps✨

  Marked as helpful

  0

  ---

  

  Natasha•60

  @TashatoonPosted about 2 years ago

  @khaya05 Thank you and this info helps a lot!

  0
• 

  Natasha•60

  @TashatoonPosted almost 2 years ago

  Updated preview card, feedback welcome!

  0