Responsive product review card component page with HTML and CSS
Design comparison
Solution retrospective
This time I was working with hsl. When I try to get dark the add-to-cart button I had to change the parameters of hsl function like this:
:root {
--dark-cyan: hsl(158, 36%, 37%);
}
.add-to-cart {
background-color: var(--dark-cyan);
}
.add-to-cart:hover {
background-color: hsl(158, 36%, 27%);
}
From now on I will be using this CSS function more often.
What challenges did you encounter, and how did you overcome them?I had problems making the card image responsive, because I didn't use javascript in this project. So, trying and trying I code of this way:
.banner.mobile { display: inline-block; border-radius: 8px 8px 0 0; } .banner.desktop { display: none; } @media only screen and (min-width: 600px) { .banner.mobile { display: none; } .banner.desktop { display: inline-block; width: 50%; height: auto; border-radius: 8px 0 0 8px; } }
There may be other better ways to code it, but at the moment this is my solution.
What specific areas of your project would you like help with?If you know a better way of do it, you can tell me. I will really appreciate it.
Community feedback
- @kodan96Posted 6 months ago
hi there! 🙌
There's no need to toggle images like this. You can use the
<picture>
element for this:<picture> <source media="(max-width: 600px)" srcset="small.jpg"> </picture>
(just include another source tag with a different image )
or you can switch the image content within
@media
queries@media screen and (min-width: 45rem) { .your-img_classname: { content: url(your-img-path) } }
Hope this was helpful🙏
Good luck and happy coding! 💪
Marked as helpful1@xXOsielXxPosted 6 months ago@kodan96 Hi! Thank you for the feedback.
I clean my code by implementing your suggestions. Specifically the second one. This is my current code:
<img class="banner" src="images/image-product-mobile.jpg" alt="A bottle of perfume">
.banner { border-radius: 8px 8px 0 0; } @media only screen and (min-width: 500px) { .banner { width: 50%; content: url("images/image-product-desktop.jpg"); border-radius: 8px 0 0 8px; } }
I think this is the most optimized way of do it. Your comment was really helpful. Thank you very much.
Happy coding!
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