flexbox, justify content, inline-block

Community feedback

• 

  donovangg•80

  @donovangg

  Posted almost 2 years ago

  Hi Jaheim! It's looking good so far. The link to the repo isn't working so I'm viewing your code through devtools. Good job on using flexbox on your <div class="container"></div> to center align it! You can use Flexbox and Grid for anything but in this context you can use it for the content as well.

  Right now you've got:

  <div class="container">
    <img class="image" src="images/image-product-desktop.jpg" alt=[dont forget your alt tag for accessibility!] />
    <div class="content">
    //Your content here
  </div>
  </div>
  

  Right now it seems like there isn't a mobile layout but flexbox would help out a lot! I think it would help out a lot if you were to to wrap your <img /> and your <div class="content"></div> in another div. Lets just call it card.

  <div class="container">
    <div class="card">
     <div class="image-wrapper"> 
        <img class="image" src="images/image-product-desktop.jpg" alt=[dont forget your alt tag for accessibility!] />    
  </div>
    <div class="content">
    //Your content here
  </div>
    </div> //card div
  </div> //container div
  

  It looks like div soup for sure, but it opens up being able to use display: flex or display: grid on your <div class="card"> element. So for a mobile layout you can now use flex-direction: column or flex-direction: row for your card. For example since you went desktop first you can write your media query

  @media(max-width: 340px) {
    .card {
      display: flex;
      flex-direction: column;
    }
  }
  

  this way on smaller screens your <div class="image-wrapper"> and your <div class="content"> are stacked on top of each other. For bigger screens you would do flex-direction: row.

  I apologize if I went on for too long. Hopefully it made sense and I didn't give you bad markup and css lmfao. Good job completing the challenge! You're on the right path

  12

  Marked as helpful