Order summary with HTML & CSS (Flexbox , media queries)

Community feedback

• 

  ZenCode95•110

  @ZenCode95Posted about 3 years ago

  This is definitely one of the best solutions I've seen for this challenge. Great job!

  1
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hey, your solution looks great! To answer your questions: you seem to know already how to make this project responsive. Using max/min-widths instead of fixed widths is probably the best way to go, so well done! You also managed to center your element, but there's actually a slightly easier way to do it. The easiest is with grid/flexbox, just as your started on your container! The reason it doesn't entirely work is because align-items needs to have a height on the element, otherwise it will not know how to center vertically. So, if you ask me, the best way would be to put a min-height: 100vh on the container and that way you could get rid of the position absolute and transform "hack" that you used on the bloc div to fix the vertical centering. If you want to further reduce the code, you could just apply everything you have on the container straight on the body, because that extra div is not actually needed.

  I hope I managed to explain it clearly ^^ If not, let me know!

  1