flexbox, justify content, inline-block

Community feedback

• 

  donovangg•80

  @donovanggPosted about 1 year 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

  Marked as helpful

  1

  ---

  

  BrovoJD•190

  @Jaheim-DouglasPosted about 1 year ago

  @donovangomez Thank you for the feedback It's really nice to see people help each other, I plan in the future to learn more about responsive designs so that my websites are accessible to everyone.

  Also thank you for explaining grid and flexbox and when to use it I appreciate it.

  Thanks from Jaheim

  0

  

  donovangg•80

  @donovanggPosted about 1 year ago

  @Jaheim-Douglas Of course Jaheim, you're doing well! There's a bunch of cool css resources. These are some of my favorites if you have time to check them out.

  • MDN

  • Wes Bos has both a Flexbox course and a Grid course

  • Kevin Powell is the "King of CSS" and done some stuff with Frontend Mentor as well.

  0