Design comparison
Solution retrospective
-
I think I'll try using an empty div with a background image to change the image from the desktop one to the mobile one instead of using two `` tags with
display: none;
. -
I also may try mobile-first workflow.
Community feedback
- @bccpadgePosted 3 months ago
Hello @Gehad28. Congratulations on completing this challenge!!!🎉
To change the product image you can do it in
index.html
file using the<picture>
tagExample:
<picture> <source media="(min-width:650px)" srcset="images/image-product-desktop.jpg"> <img src="images/image-product-mobile.jpg"> </picture>
Be sure to add descriptive alt text improves accessibility and screen readers will say the alt text below in the example for people who blind and or visually impaired.
Example:
alt="Gabrielle Essence Perfume bottle laying down with a green leaf above and below it">
More info📚:
To improve your
index.html
file, make sure you use HTML Semantic TagsAdd to cart text should be wrapped in
<button>
because users are clicking on the<button>
to trigger an action to do somethingUsing a
<div>
on the website does not explain any of the contentHere is my solution to this challenge: Product preview card component
I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful1 - @geomydasPosted 3 months ago
Don't use background images for things like this. You can use
display: none
to change but it is much more better to use the<picture>
tag. The thing I said here is the same as what Rebecca saidMarked as helpful0
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