Order Summary Built with SCSS

Community feedback

• 

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  Hey Fathul You did amazing work congratulations for completing this challenge

  -- To make your code more Responsive

  ------------------------------------------------------------------ Tip ---------------------------------------------------------------------

  • use media query for mobile and Ipad but in this challenge you will use for mobile only with min-width:375px or smaller and max-width:775px.

  • give image 100% max-width but don't use hard way for give image special width like width:450px this will damage responsivity but use max-width:100% and give the container width in desktop and mobile.

  section.card 
  {
      width:450px
  }
  
  @media(max-width:775px)
  {
       section.card 
       {width:350px}
  }
  

  • don't give section specific height that will damage the responsivity in mobile remove height and use min-height instead .

  • don't use large number of margin , and Use rem unit or percentage(%) instead pixel to keep content fit container

  • align elements in the center if you want instead give it large margin like heading h1, use text-align:center

  • you can use variables in css and save colors or fixed sizes in variables like this :

  :root 
  {
  --main-color:#3829e0;
  --font-family:'Red Hat Display',sans-serif;
  }
  
  h1 
  {
  font-family:var(--font-family)/*to call  value of the variable*/
  }
  

  • you can comment footer section in this challenge to get more awesome view

  You used semantic class names so code is readable and this awesome

  Regardless You did amazing I hope this is useful to you... Keep coding👍

  Marked as helpful

  1

  ---

  

  Fathul Irfaan Abdillah•320

  @thefathdevPosted over 2 years ago

  Wow, Thank you so much @zenab12 ! Can't wait to apply these best practice tips 🙌

  0

  

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  @whatTheFath you are welcome Fathul 😊

  Marked as helpful

  0