Order summary component using HTML and CSS

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  📌 Some suggestions

  • I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
  • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens
  • Instead of using position to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
      font-family: "Red Hat Display", sans-serif;
      min-height: 100dvh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 20px; /* Separate the main from the footer */
      box-sizing: border-box; /* This could go in the universal selector */
      background-image: url(./images/pattern-background-desktop.svg);
      background-position: center top;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: #e0e7ff;
  }
  

  Marked as helpful

  0

  ---

  

  Camila Kersten•20

  @camilakerstenPosted 10 months ago

  @Blackpachamame Thanks for your kind words! I will implement those changes from now on. Have a great day!

  1