Product preview card component (mobile first, scss, semantic html)
Design comparison
Solution retrospective
The usage of tag to load
depending on the device dimensions
I know how to use breakpoints and toggle but I wanted to use
. I just read the documentation provided on the Star challenge section.
I'm struggling with an issue where the elements are being "unexpectedly" resized. I know I have some medias queries there but I'm also using
and to display different images on different screen sizes. The deal is that while a breakpoint is being hit, and the images are not yet loaded, the browser I believe uses a different dimensions for the image. While trying to figure out what's going on, I found [this](https://fedmentor.dev/posts/html-plan-product-preview/#prices) on the Frontend Mentor discord. It helped me finding out about
and elements. Also, I found a11y solution for the strike-through text (original price) using the
element.
Community feedback
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