Product preview card component

Community feedback

• 

  Rostyslav Nazarenko•560

  @rostyslav-nazarenkoPosted almost 2 years ago

  Hello! Nicely done!

  • HTML
    • use main and footer for semantics. Change <div class="section"> to <main class="section">, and <div class="attribution"> to <footer class="attribution">.
    • look at the picture element for providing different images to the different viewport widths, plus it has a lot more uses, check it up.
    • don't use id for styling, use only classes.
    • look at providing additional information for people who use screen readers as they will not understand what two prices mean. I'm still learning about accessibility...

  Your CSS has some issues, keep learning and you will notice them yourself. Feel free to look at other people's solutions for learning purposes.

  Keep coding! Have a great day!

  Marked as helpful

  1

  ---

  

  Udy-Johnson10•10

  @Udy-Johnson10Posted almost 2 years ago

  @rostyslav-nazarenko thank you for the feedback

  0
• 

  Gift Richard•520

  @fibonacci001Posted almost 2 years ago

  the easiest way will be to display the prices in inline-block, and use margin: auto 0; or you specifically set a margin to help center it, and use media query to control the spacing when it's displayed on mobile. I hope this was helpful @Udy-Johnson10

  Marked as helpful

  0

  ---

  

  Udy-Johnson10•10

  @Udy-Johnson10Posted almost 2 years ago

  @fibonacci001 thank you for your feedback

  0