using flexbox, js

Community feedback

• 

  T

  Grace•30,990

  @grace-snowPosted about 4 years ago

  Hi Esraagamal,

  Can I ask why you've opted to use flexbox for this challenge? I think it's meant to be one that helps you learn CSS Grid, and the original design is ideal for a grid layout. You're making it a lot harder for yourself using flex instead.

  On mobile at the moment your current solution leaves a load of space on the right (the single column doesn't stretch to full width of the screen. I would look at that.

  A great solution for grids like this if you're really keen to stick with flexbox is something like this https://github.com/Heydon/fukol-grids

  That's a completely responsive grid that relies on ideal widths. You'd only need to change flex-basis at each breakpoint.

  Hope that's helpful. Happy learning! ☺

  1

  ---

  

  esraagamal•600

  @EsraaGamal-22Posted about 4 years ago

  @grace-snow I'm using flexbox as practice for me on this part, and for the second point can you check my code after the update?

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, nice job, esraagamal! 🙌

  Your solution looks good and the light/dark themes work well! 👍

  Just a small suggestion,

  • Perhaps instead of breaking into a single-column layout right away when the width of the page becomes smaller, you could break into two columns while there is still available space and break into a one-column layout a little later when there's only room for one. That way, the content would take up more of the available room and there would be less blank space.

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  esraagamal•600

  @EsraaGamal-22Posted about 4 years ago

  @ApplePieGiraffe Thanks for your opinion, but I don't understand which point which refers to it, can you tell me which part?

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @EsraaGamal-22

  Sure!

  I'm talking about the boxes that display the statistics for the social media dashboard. In the desktop layout, the are four columns of boxes. When the width of the screen decreases, there is only one column instead of four (because there isn't enough room for four columns, anymore). I just mean it might be nice for the boxes to be laid out in three or two columns if there is enough space to do so (instead of just one column).

  But what you have already is nice and works, too! 😉

  Happy coding! 😃

  0

  

  esraagamal•600

  @EsraaGamal-22Posted about 4 years ago

  @ApplePieGiraffe Ok, that's a nice suggestion. Thanks a lot for your opinion 😄

  0