Order Summary Component

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @Jwalt95!

  Your solution looks great!

  I have only one suggestion:

  • If you add this to the body, the background pattern will look exactly like the original design:

      background-size: contain;
      background-repeat: no-repeat;
  

  I hope it helps!

  Other than that, great job!

  0
• 

  Bryan Li•3,530

  @Zy8712Posted 10 months ago

  Your site looks pretty good. Main things I'd change is with your css.

  For the background you should make sure to include background-repeat: no-repeat; to get rid of the repeating image background. You should also make sure to use background-size: contain; to control the size of the background image.

  Lastly, you should add a media query so that the background image changes to the mobile version given to you in the images folder. That way it'll look good on mobile.

  Hope this helps 👍

  0
• 

  Rebecca Padgett•1,840

  @bccpadgePosted 10 months ago

  Hello @Jwalt95. Congratulations on completing this challenge!!!🎉

  I have a few tips you might be interested in to improve your solution.

  HTML 📃:

  • Every website should have <h1> and the title of this component you can use <h1> or <h2>

  You can use <h1>Frontend Mentor | Order Summary card component<h1> to explain the project for screen readers by adding visually-hidden CSS class

  /* sometimes referred to as .sr-only */
  .visually-hidden:not(:focus):not(:active):not(:focus-within) {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }
  

  The text Order Summary can be wrapped in <h2>

  More info📚:

  • Heading Tags

  Images that are decorative can have alt text blank and aria-hidden:true; do it can be ignored by screen readers

  CSS 🎨:

  • Add background-repeat: no-repeat; on the body and the image won't repeat
  • Font size shouldn't be in pixels because pixels don't scale when users want to change their font size in their preferred browser setting.
  • Try implementing the shorthand property for padding, margin and other CSS properties.

  More info📚:

  • CSS Shorthand property

  Here is my solution to this challenge Order Summary card component

  I hope you find this useful and don't hesitate to reach out if you have any questions

  0