Perfume Product Preview Card Component - Vanilla CSS and HTML
Design comparison
Solution retrospective
I loved coding this one! If you think there is a better way that I could have accomplished this output let me know.
Community feedback
- @jhellardPosted over 2 years ago
Looks pretty good! The border-radius isn't working properly on desktop, you could also just use one image and change the source dynamically in your CSS. Here's an article about that - https://simplernerd.com/css-img-src/
ID's are generally only used when targeting elements with JS, using class is recommended instead when just modifying with CSS.
Marked as helpful1@CrypticMangoPosted over 2 years ago@jhellard Thanks for the tips I will take a look into them.
0@CrypticMangoPosted over 2 years ago@jhellard Not sure why my solution looks different than it does on my computer. How do I fix it? On my computer it looks closer to the example.
0@jhellardPosted over 2 years ago@CrypticMango Can you elaborate? The border-radius looks good for me now. If you're referring to the image/solution comparison above I've noticed that can be a little odd at times. Not sure how to fix that myself.
1@CrypticMangoPosted over 2 years ago@jhellard Okay thanks! Yes, I fixed the border-radius. And yes I meant the solution image but if it's just a bug I won't worry about it. I appreciate your help 😀
0
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