Used flex and variables

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some feedback for you if you want to improve your code.

  HTML 📄:

  • Use the <main> tag to wrap all the main content of the page instead of the <section class="card"> tag. With this semantic element you can improve the accessibility of your page.

  • You could use the <del> tag to indicate the price that was before the discount. Additionally, you can use a sr-only class to describe the discount. This will help screen reader users to understand that the price was discounted.

    Example: <del><span class="sr-only">Old price: </span>$169.99</del>

  CSS 🎨:

  • At the moment, your solution has not been adapted for mobile devices :(

  • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 700px to make sure that the component will have a maximum width of 700px on any device, also remove the width property with a percentage value.

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  0

  ---

  

  chicaboom-73•50

  @chicaboom-73Posted almost 2 years ago

  @MelvinAguilar Hi Melvin thanks for the feedback - I really appreciate the help and suggestions. I am still trying to figure out the adaptive design so the article you provided was so helpful in understanding the different units and the impact they may have when moving from full-screen to mobile. Actually, all of your suggestions were brilliant. Thanks for taking the time

  0