Submitted almost 4 years ago

Stats Preview Card Component

dinahbrito•120

@dinahbrito

A solution to the Stats preview card component challenge

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?

Code

Please log in to post a comment

Community feedback

Bernardus•1,095
@BernardusPH
Posted almost 4 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 helpful

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