Order Summary Component Using Flexbox

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted about 2 years ago

  Hey @omerkhan7210, the trick here is to push the svg to the top of the page with background-position: top center and then giving the body background-color: var(--color-1). Other tips:

  • Use mobile-first when writing CSS. It's harder to scale down large elements to make them fit in smaller screens
  • It's ideal to keep all styles inside your css file instead of placing them inside html. It was not necessary in this case.
  • The document is missing an h1. Don't choose a heading tag based on how large the text appears in the design. Use classes to style the headings instead. Here's a resource
  • The link 'Change' should be an a or button tag since it is an interactive element
  • The woman image is not expanding to match the width of the card in medium sized screens. Use background-size: cover

  Hope this helps!

  Marked as helpful

  4

  ---

  

  Omer7_7•100

  @omerkhan7210Posted about 2 years ago

  Hey @emestabillo Next time i will assure to write all the css on mobile screens first , then move on to larger screens. Yes the svg background part was a little confusing,will try it on later projects. The positioning of bg-image got a little bit weird. As for the button/anchor part i thought there wont be any interaction and i had given a font size to my p tags so i thought it would be okay to use it. Will definitely see through your resource. Thanks for the tips Ma'am.🙏

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Omer, Congratulations on completing this challenge!

  Here’s some tips to improve your component design:

  The SVG background is not properly applied, to fix that first you need to add background-size: no-repeat (to avoid it repeating) and then add background-size: contain to make it fit full width and vertically aligned with the card.

  body {
      background-size: contain;
      background-image: url(img/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-color: #ebf5ff;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Omer7_7•100

  @omerkhan7210Posted about 2 years ago

  Hey @correlucas thanks for the tips sir ,later on will try to code better and accurate.👌👍

  0