T
ApplePieGiraffe• 30,545
@ApplePieGiraffe
Posted
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 andmax-widthof the card for the mobile/desktop layouts. - Setting the
alttext 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
articletag (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
@Asfen
Posted
@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
@ApplePieGiraffe
Posted
@Asfen
I just took another look at your solution, and it is already looking much better! Keep it up! 👍
0
