Design comparison
Solution retrospective
Where would I add the desktop image at? How do you change the color of the image? My image seems squished a bit at certain sizes, how do I keep it the full size of the image?
Community feedback
- @PeshwariNaanPosted about 2 years ago
Hello Luis - nice work on the challenge. I see that you tried to do an overlay which should work fine but I've seen a lot of these projects done that way and the color is always off. The best solution I've found is too set the background color of your card container to the purple accent color. Then on your image use: .img { mix-blend-mode: multiply;} and that's it. As for the image getting a little squished, I would just adjust your media query to change before the image starts to change too much. The problem is the whole container is growing in the y-direction but shrinking in the x-direction and the image cannot keep the aspect ratio like it can in the tablet / mobile view where both directions get smaller. Hope this helps - Cheers
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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