Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

flexbox, justify content, inline-block

BrovoJD 190

@Jaheim-Douglas

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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.

Community feedback

donovangg 80

@donovangg

Posted

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-Douglas

Posted

@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

@donovangg

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord