Order-summary-component (CSS Flexbox, Responsive)

Community feedback

• 

  Adriano•38,250

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Sonu Kumar, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  To improve the design of the page we can make some changes to the background image:

  @media only screen and (min-width: 500px)
  body {
      background: #dee5ff url(/images/pattern-background-desktop.svg) no-repeat;
      background-size: 100% 50vmin;
  }
  

  Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0

  ---

  

  Sonu Kumar•190

  @SonuKr95Posted almost 2 years ago

  @AdrianoEscarabote Thank you for your suggestion, I will include all the changes as highlighted by you. I appreciate the support and guidance from you.

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  Hello , You have done a good work! 😁

  Some little tips to improve your code:

  • To fix the top image in the background just put more specific background properties to the body:

  background: url("../img/pattern-background-desktop.svg") no-repeat top center;
  background-size: contain;
  background-color: #e0e8ff;
  

  • use article or div tag instead of section to the container card for improve the Accessibility
  • use img element instead of a styled div for the image of card
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of texts
  • remove all margin from #main-cont id because with flex they are superfluous
  • use .class instead of id to style the elements because the ids must be unique in all the page and many time they are used for javascript hook
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  0

  ---

  

  Sonu Kumar•190

  @SonuKr95Posted almost 2 years ago

  @denielden Thank you for your suggestion, I will include all the changes as highlighted by you. I appreciate the support and guidance from you.

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  @SonuKr95 you are welcome and keep it up :)

  Marked as helpful

  0