Order summary component

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Mubaraq 👋

  Congratulations for completing the challenge!

  It's a nice solution. However, there are still room for improvements.

  • To remove most warnings in Accessibility report, you need to wrap <section class="order"> inside a <main></main> block.
  • Do not use <h4> heading tag in <h4>Annual Plan</h4>, instead use regular <p> to be more semantic. Just add styles or use <b></b> tag if you want it to be bold.
  • In mobile view, it looks like the content width is more than the body's width. It makes some part of the page have white background as opposed to the actual background-color hsl(225, 100%, 94%). To solve this, add a media query like below:

  @media screen and (max-width: 500px) {
    .icon img {
      width: 100%;
      height: auto;
    }
    .order-icon {
      width: 100%;
    }
  }
  

  Hope this helps. Happy coding!

  0
• 

  suhayb jirde•1,050

  @suhaybjirdePosted almost 2 years ago

  well done only add this font to your css file

  @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;600;900&display=swap');
  

  add this to your body selector

  body {
  font-family: 'Red Hat Display', sans-serif; 
  }
  

  congrats by the way👏

  0