Product preview page responsive

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 2 years ago

  Hello there, Subin Adhikari! 👋

  Nice effort on this challenge! 👏

  A few things I suggest are,

  • To improve the way you handle widths of elements and still make sure things are responsive, try setting the width of the card component to 100% and then adding a max-width to it to prevent it from becoming too wide when there's extra space around it. This is often better than setting the width of the element to a fixed value or percentage because it'll ensure that the element only takes up as much space as it should be allowed but also shrinks accordingly when the space around it shrinks. Then, you can use a single media query to change the layout and max-width of the card for the mobile/desktop layouts.
  • Setting the alt text for the shopping cart icon to be an empty string so that it will be ignored by screen readers. That’s because that element isn’t necessary or important to the content of the page and as a result doesn’t need to be read by screen readers.
  • Wrapping the entire card component in an article tag (rather than just the text content and excluding the image).
  • Looking into using the <picture> element to automatically switch between mobile and desktop versions of the image. You can learn more about that element and how to use it here. 🙂

  Hope this helps. 😊

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  2

  ---

  

  Subin Adhikari•40

  @AsfenPosted almost 2 years ago

  @ApplePieGiraffe Thank you very much. I learned a lot because of your guidance. If you have time check out the new code it has all the changes made except article wrapping and looks and feels awesome. I will work on including picture on article next.

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 2 years ago

  @Asfen

  I just took another look at your solution, and it is already looking much better! Keep it up! 👍

  0
• 

  Kamil•260

  @WuczekPosted almost 2 years ago

  Hello coder 😎 I would recommend you to use <picture></picture> element to handle that responsiveness image mobile-desktop :

  <picture> <source media="(min-width: 675px)" srcset="/images/image-product-desktop.jpg"> <img src="/images/image-product-mobile.jpg" alt=""> </picture>

  For more info about picture element: https://www.w3schools.com/tags/tag_picture.asp

  0