Product preview card component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

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

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

  • Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops. You can set the max-width at 37.5rem.

  • The container isn't centered correctly. You can use flexbox or grid layout to center elements. You can read more about centering in CSS here. Also, remove margin: 8% 30%;

  • For specificity reasons you should work better with classes since they are reusable, and you can leave the ID when you work with Javascript.

  • You could use the <del> tag to display the old price: <del id="strike-txt">$169.99</del>

  • On mobile devices, using a media query, change the direction of the container with class container with flex-direction: column;

  I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  1