Order summary component with flexbox

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @AntonielAureliano!

  Your project looks great!

  I noticed that you used margin to place the card in the middle of the page. Here's two very efficient ways to center the card:

  • You can apply this to the body (in order to work properly, you can't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  1

  ---

  

  Antoniel Aureliano•140

  @AntonielAurelianoPosted 11 months ago

  @danielmrz-dev You can be sure it will help me a lot. Thank you very much!! ❤️

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  @danielmrz-dev "works well with projects with only one centered element, like this one" This is one of the worst challenges to use position: absolute 😢. Due to the length of the element, it will definitely be hidden on small screens in landscape orientation. That's why a few days ago, someone recommended not using position: absolute. It can also cause width problems that are only resolved with width: 100%, one more line of code.

  If I change everything to position: absolute and remove the margin, this is like THIS solution looks: https://imgur.com/56J83mx

  Where did the image part go if I haven't scrolled? position: absolute centers it so precisely that it hides it. It's not suitable for this type of challenge.

  2

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  @MelvinAguilar

  Thanks Melvin, I have never noticed that landscape orientation detail. It never occured to me, since most projects like this fit normally in portrait orientation. I'm gonna remove that part from the comment. And from the next ones too. Thanks again! 😊

  0

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Glad it was helpful ! 😊

  And please, check the other comments too, I first gave you an innacuratte information! Sorry about that 🙌🏼

  @AntonielAureliano

  0