Order-Summary-Component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Fatima, Congratulations on completing this challenge!

  Here's some tips to improve your code:

  To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  .main-subcontent {
      display: flex;
      margin-bottom: 30px;
      flex-direction: column;
  }
  }
  

  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-repeat: no-repeat;
      background-image: url(images/pattern-background-desktop.svg);
      background-position: top;
      background-repeat: no-repeat;
      background-color: var(--clr-paleblue);
      font-family: var(--ff-hat);
      display: flex;
      justify-content: center;
      background-size: contain;
      align-items: center;
      min-height: 100vh;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Adriano•38,100

  @AdrianoEscarabotePosted about 2 years ago

  Hello Fatima Zahir, how are you?

  I really liked the result of your project, but I have some tips that I think you will like:

  I noticed that the content is not centered, to fix it I did the following:

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

  I noticed that you forgot the background image, to put it in the body, we can use the background-image property. for example:

  body {
      background-image: url(nameoftheimage.png);
      background-position: top;
      background-repeat: repeat-x;
  }
  

  The rest is great!!

  Hope it helps...👍

  Marked as helpful

  0

  ---

  

  Fatima Zahir•40

  @Fatima-hub333Posted about 2 years ago

  @AdrianoEscarabote Thank You So much I will do these changes & will be careful next time. Thank you for taking time to review my code:-)

  1

  

  Adriano•38,100

  @AdrianoEscarabotePosted about 2 years ago

  @Fatima-hub333 no problem, keep coding!

  0