Design comparison
SolutionDesign
Solution retrospective
Questions:
- Is there a better way to do the overlay? I used a linear-gradient with the accent color, then added a background-blend-mode with the property "multiply". But the color doesn't really match the original.
- When resizing the browser from a large viewport to a smaller one, the div with the background image shrinks and eventually disappears, how do you fix that?
Community feedback
- @BernardusPHPosted about 3 years ago
Just a suggestion from a beginner, but I believe the use of "fr" in grid uses the min amount of space and because grid doesn't see a background image like an object, like text or a picture, that takes up space it perceives it as empty, sort of. I did set the grid-template-columns to 50% 50% and that fixed the shrinking part.
Marked as helpful0@dinahbritoPosted about 3 years ago@Artosh-afr Thanks that helped with the disappearing image!
0
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