Order Summary Component using Flexbox

Community feedback

• 

  Unkookerinho•460

  @UnkookerinhoPosted over 1 year ago

  Hi raf0411! 👋 Congratulations on succesfully completing the challange! 🎉

  Your solution looks great! There are some ways to improve spacing of elements inside your container:

  • Delete all the margin-left's from your code, it's not a good practice to center things this way.
  • Put everything below image in another div, and change it to:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  

  This way everything will be perfectly centered without using margins. Now we can add some padding to make it look nicer without touching edges of div - padding: 2rem;.

  • To fix .plan-container we add width: 100%; so we make sure it is as wide as it can possibly be inside its parent div.
  • You should now adjust all the margins that are left so it looks how you want it to.
  • In your next project, try to first create main container that you will center and put all content of page to it. This way working will be much easier, and you would be able to add padding to it so on smaller screens content of the page doesn't touch edges of the screen. You should mess more with flexbox or grid to layout your page and you will be good 😊

  I hope you find my answer helpful and I wish you happy coding! 😃 Keep up your great work! 😊

  Marked as helpful

  1
• 

  Muhammad Hamza Malik•70

  @hamzadvlpr1Posted over 1 year ago

  Unbelievable Design

  0