Reactive Product Preview Component with HTML and CSS

Solution retrospective
Getting the images to switch based on size was a real uphill battle. Also making sure i'm using the right CSS selectors and rules at the right times. I am more or less happy with how it turned out but I definitely have a lot of learning to do.
What challenges did you encounter, and how did you overcome them?Getting the site to respond well to viewport size changes was a bit of a doozy. It took me a lot of time and a lot of google searches to figure it out but i got there for the most part. I think next time i'm going to try less hard coding things and let the sizes change a little more. I think my HTML syntax is all out of whack on this one too.
What specific areas of your project would you like help with?Everything pls. This code is undoubtedly riddled with mistakes and I am very much looking for pointers here.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@super7ramp
Good job :)
A few remarks:
- "perfume" should be in uppercase
- The button should change color when hovered
- Line height seems not to match the design
- Image in mobile view seems a bit streched.
Suggestion: Avoid hardcoding
width
/height
, setmax-width
instead.Regarding HTML, it doesn't look as bad as you suggest! Kudos for trying
<picture>
:) Maybe favour classes over ids.
Join 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