Design comparison
SolutionDesign
Solution retrospective
Please provide your valuable feedbacks.
Community feedback
- @bccpadgePosted about 1 year ago
Hello @Amens11. Congratulations on completing this challenge!!!🎉
- The reason why your image on desktop and shopping cart icon isn't working is the image src path is wrong
- To fix the issue you can remove the forward slash on img tag and the image and cart icon will show up:
<picture class="product-img-side"> <source srcset="images/image-product-mobile.jpg" media="(max-width: 760px)"> <img src="images/image-product-desktop.jpg" alt="Perfume"> </picture> <button class="btn"><img src="images/icon-cart.svg" alt=""> Add to Cart</button>
- You can add
aria-hidden: true;
on the image because it is decorative and is ignored by screen readers. CSS 🎨: - If you want to component to look similar to the design files you can add the
background-color: hsl(30, 38%, 92%)
Hope this helps you
Marked as helpful0@Amens11Posted about 1 year agoHi @bccpadge, thanks for your feedback, I have updated my code, hopefully it is working now.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord