Order summary component using flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Sudharshan S, Congratulations on completing this challenge!

  🎨 Here are some tips to improve your component design:

  Your background is applied but its not too similar to the design yet. Add background-size: contain instead of background-size: cover to make it display the size full width and center with the card vertically. Note that now is slightly different from the challenge design.

  body {
      background-image: url(images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-color: var(--pale-blue);
      font-size: 16px;
      font-family: 'Red Hat Display', sans-serif;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Sudharshan S•90

  @Sudharshan-24Posted about 2 years ago

  @correlucas thank you so much for your suggestion Lucas.

  1
• 

  Nelson Uprety•320

  @nelsonuprety1Posted about 2 years ago

  Looks good. One suggestion i can give you is change the background-image whenever the site is viewed on larger device.

  example:

  @media (min-width: 768px) { body { /* use your own path for the background desktop svg*/ background: url('./images/pattern-background-desktop.svg') no-repeat; background-color: hsl(225, 100%, 94%); } }

  Marked as helpful

  0

  ---

  

  Sudharshan S•90

  @Sudharshan-24Posted about 2 years ago

  @nelsonuprety1 thank you so much for your suggestion Nelson.

  1