A responsive order summary component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Divine! 👋

  Congratulations on completing this challenge! 🎉

  Some suggestions from me.

  • The width and the hieght attributes on the img element are used to tell the browser knows how much space the image requires before it can be fully loaded. As a result, it would optimize CLS (Cumulative Layout Shift). Also, they should be unitless because it is based on the aspect ratio of the image.
  • There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.
  • To make the card in the middle of the page, you can make the body element as a flexbox container.

  /**
   * 1. Make the card vertically center and
   *    allow the body element to grow if needed
   */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* 1 */
  }
  

  That's it! I hope you find this useful! 🙂

  1