order summary component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  You forgot to give the body a background-image with a background-size of contain and background-repeat of no-repeat.

  In the media query you have to change the background-image of the body.

  For a responsive content, give the main a fixed max-width value instead margin and overflow-hidden.

  To center the main on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

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

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0

  ---

  

  Brijeshkumar Patel•200

  @brijeshkumar001Posted over 1 year ago

  @Hassiai Thank you for your detailed reply! Your suggestions are very helpful for creating a more responsive and visually appealing design. I appreciate the reminder to use relative units like rem or em instead of px for better scalability. I will definitely make those changes to my code and continue to improve my skills in CSS. Thank you again for your assistance, and happy coding to you as well!

  0
• 

  Riley•260

  @rileydevdznPosted over 1 year ago

  Hi! I have a few suggestions:

  • Adding more semantic elements in your markup. In your .plan div you used multiple spans. You have the <img> and <a> elements here, use those instead of wrapping them in spans. And replace the remaining two spans with <p> elements. Then use Flexbox or Grid to style the layout of these elements.
  • Media queries don't accept the > and < characters, they use min- and max- prefixes to mean "greater than or equal to" and "less than or equal to". To apply a style when the viewport is larger than 375px, for example, you would use @media (min-width: 375px)

  Great job completing the order summary component!

  0

  ---

  

  Brijeshkumar Patel•200

  @brijeshkumar001Posted over 1 year ago

  @rileydevdzn Hi there! Thank you for your suggestions, they are very helpful. I completely agree with you about using more semantic elements in the markup and avoiding unnecessary use of spans. I will definitely incorporate your advice by using the <img> and <a> elements instead of wrapping them in spans, and by replacing the remaining two spans with <p> elements.

  Additionally, thank you for clarifying about the use of min- and max- prefixes in media queries. I will keep this in mind and make sure to use them appropriately in my future projects.

  Thank you for your kind words about the order summary component! It's great to hear that you think I did a good job on it. I appreciate your feedback and suggestions, and I look forward to improving my coding skills further.

  0