Order summary using flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Masunsa 👋, good job completing this challenge! 🎉

  I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution instead of using <div class="container">.

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.

  • Solve the errors presented in the report of this solution.

  • You could use the CSS backgrounds properties to set the background:

  body {
     . . .
     background-color: hsl(225deg, 100%, 94%);
     background-image: url(./images/pattern-background-desktop.svg);
     background-repeat: no-repeat;
     background-position: left top;
  }
  html {
      /* background-color: #e0e8ff; */ /* Remove this color here */
  }
  

  • background-color Set the background color.
  • background-image Set a background image.
  • background-repeat Sets if a background image will be repeated along the horizontal and vertical axes, or not repeated at all.
  • background-position Sets the starting position of a background image.
  • You can also specify the size of the background image with background-size

  The background property is shorthand for all the properties mentioned above:

  background: hsl(225deg, 100%, 94%)
     url(./images/pattern-background-desktop.svg)
     no-repeat
     left top;
  

  And to change it in the media query:

  @media screen and (max-width: 500px) {
   body {
      background-image: url(./images/pattern-background-mobile.svg)
   }
  }
  

  References:

  1. CSS background Property |
  2. Background property
  3. Background-repeat (MDN)

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  0

  ---

  

  Marat•40

  @MasunsaPosted about 2 years ago

  @MelvinAguilar Thank you for this detailed reply. I really appreciate it. I had some problems with background properties. Now it is fixed. Have a nice day 👍

  1