Frontend Mentor | donovangg's profile

@Jaheim-Douglas

Submitted about 1 year ago

I found this project a challenge because it put my use of Flexbox and justify-content to the test but I managed to overcome this challenge, Overall I like that I completed this project without help.

The only thing that I am unsure about is the use of Grid and Flexbox and where to use it.

flexbox, justify content, inline-block

donovangg• 80

@donovangg

Posted 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

donovangg

All comments

flexbox, justify content, inline-block

Order Summary Component. Nothing special or cool lol