Order summary card SCSS

Community feedback

• 

  Adarsh Rai•560

  @AdarshRai0Posted over 2 years ago

  Hi MURRAY122 congratulations on your new challenge!

  I took a look at your code and I have some tips for you.

  The ripple background was missing, in this case it is better to import it in the body with background-image and put a media query to change mobile / desktop or use the <picture> tag in the HTML.

  I saw that you used id as a selector, but a good practice would be to handle the entire design with classes and leave the id for forms and Javascript.

  Congratulations, since your first project, your challenges have gotten better and better.

  0

  ---

  

  MURRAY122•280

  @MURRAY122Posted over 2 years ago

  Hi @AdarshRai0,

  Thanks for your comment and feedback. Could you expand a little more?

  • The ripple image is appearing on the preview site for me, and I have used media queries to switch between the two images. So, could be your cache? unless you're referring to the ripple background as something else that I've missed?
  • For the id selection, are you referring to main and body tags? If so, are you saying its best practise to define classes for them and style them that way? For example, <main class="main"></main>

  Thanks again for your feedback.

  0
• 

  FARAZ ALI•110

  @farazali00Posted over 2 years ago

  amazing bro!

  *, *::before *::after { box-sizing: inherit; }

  can you explain this cuz i am totally newbie hope you will help me and how you make it totally responsive for every device?

  0

  ---

  

  MURRAY122•280

  @MURRAY122Posted over 2 years ago

  Hi @farazali00,

  Thanks for your comment and feedback. To answer your question, box-sizing: inherit; sets all child elements to inherit the box-sizing of their parent elements, which this case was border-box.

  Briefly border-box tells the browser that any padding, and borders are included in the width and height of the element. The inherit sets that all child elements of that element will follow that style.

  You can learn more here about the subject W3School and hopefully it can help answer any more questions you may have.

  1