order-summary-card-component

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  Nice well done. Just a few tips

  • Make it a habit of using min-height: 100vh; instead of height: 100vh;. With min-height the page will be responsive, because you are setting a minimal height. With height, the height of the page will be fixed at the given value.
  • The background image is not crossing the width of the page, to fix this you need to add background-size: contain;
  • When using flexbox you don't need to add flex-direction: row; by default flexbox is always set to row
  • On .main you have a min-width: 20rem; change it to width: 20rem;. This will prevent the card from been squeezed in the width as the screen size gets smaller
  • The annual plan section is a bit off to the right, see if you can center it.

  1

  ---

  

  j-masuma•40

  @j-masumaPosted about 1 year ago

  Thank you so much @hitmorecode for your feedback. I will surely set these things.

  0
• 

  PastequeMure•260

  @PastequeMurePosted about 1 year ago

  For you background image. The size isn't feat the view.

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: 'Red Hat Display', sans-serif;
      font-size: 15px;
      background-image: url(./images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-size: 100%;
      background-color: hsl(225, 100%, 94%);
  }
  

  With "background-size" you can fit viewport

  0

  ---

  

  j-masuma•40

  @j-masumaPosted about 1 year ago

  Thanks @PastequeMure. I will improve these things. And will be looking forward for your further feedbacks.

  0