Order Summary Component using Flexbox and CSS Grid

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👋 Hello Giuliana, congratulations for you solution!

  I took a look in your code and one thing you can improve is fixing the background and using the body to center all the content instead of a div.

  I open your github code and I fixed it using flexbox to center all elements in the body

  Centering all elements

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

  Fixing the background position

  background-image: url(./images/pattern-background-desktop.svg); background-size: contain; background-repeat: no-repeat; background-color: var(--Pale-blue);

  At this point you'll not need the container-card since you apply the background and the center properties all in the body like the code bellow, or you can just fix the background inside the container, but I think is more practical apply all changes on body:

  body { font-family: 'Red Hat Display', sans-serif; display: flex; align-items: center; justify-content: center; max-height: 100vh; max-width: 100vw; background-image: url(./images/pattern-background-desktop.svg); background-size: contain; background-repeat: no-repeat; background-color: var(--Pale-blue); }

  I hope it helps you!

  01

  Marked as helpful