Order Summary Component Using HTML/CSS

Community feedback

• 

  Ahmed Bayoumi•6,680

  @Bayoumi-dev

  Posted about 3 years ago

  Hey!

  • You have used flexbox to center the component on the page, but you need to set the height of main ---> min-height: 100vh; to center it at this height

  main {
      /* width: 100%;     <---Remove */
      /* height: 100%;     <---Remove */
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Red Hat Display', sans-serif;
      line-height: 1.5;
  
      min-height: 100vh;    /* <---- Add */
  }
  .order-card{
          width: 450px;
          height: 680px;
          background-color: #fff;
          border-radius: 20px;
          /* margin: 40px 40px;     <---Remove */
  }
  

  • I also suggest you use <button>Cancel Order</button> instead of <p>Cancel Order</p>....Buttons are used for actions like opening or closing something, or sending a form.

  Hope this is helpful to you

  01