Product preview card component solution

Community feedback

• 

  Rostyslav Nazarenko•560

  @rostyslav-nazarenkoPosted almost 2 years ago

  Hi! Great result! 😀

  Just a few suggestions/issues. I'm only studying so take my advice with a grant of salt.

  • component breaks from 700px to 900px, limit the width of the component or set media query to trigger earlier.
  • img is an inline element, most people use resets to make it display as block element that way there's no need in setting line-height to 0, especially when you need then to set it again on text elements
  • for centering elements we use flexbox but it doesn't work if the parent element has no height, so that is why we set min-height: 100vh; to the parent element. You don't need to repeat it on body element and on main element, use only on main. And remove min-width from both of them
  • Sass is a great tool but be aware of too much nesting. It creates problems with specificity in big projects. .prouduct_outer .prouduct_body .old_price {} is the same as .old_price{}.

  1

  ---

  

  Mohamed Taman•80

  @mtamanPosted almost 2 years ago

  @rostyslav-nazarenko Thank you ) I am happy with your feedback, 😊 and I am still learning) and I am self learning.

  0