Responsive page using CSS FlexBox

Community feedback

• 

  stv10•40

  @stv10

  Posted almost 3 years ago

  Hello Hami! congrats on finishing this challenge.

  Your solution is almost perfecst to me, i'm learning too but here are a few changes i would do.

  1 I don't know if setting body to flex is a good idea, a better choice would be to wrap your content (on this case div 'product'), in a 'container' div and give the flex property to it.

  2 In the smaller screens you forgot to center your divs inside product div, check it out later

  3 Remember using flex means that you will have a father container and childs containers the father is the flex one and it is better if you don't change the size of the father to make the childs smaller. You can quit the flex basis from body and manage the size of product with styles like max-width and max-height and that will allow you to use the align-items property to center your content and not use the padding

  01
• 

  Harsh Kumar•5,480

  @thisisharsh7

  Posted almost 3 years ago

  Hey Hawi, well done! your solution seems to be fine but there is some improvements which could be made

  1. For aligning the content to the center avoid using padding like here you did .product{ padding:231px 0; } instead you can use this body{min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;} in your code

  2. Avoid margin here in media query at 700px instead you can give .product align-items: center and margin problem can be resolved.

  3.When you use flex you should give align-items and justify-content property to the center so that content perfectly aligned to both the axes

  Hope this answers your query..

  03