Submitted over 3 years ago

Stats preview card

@MarioLisbona

A solution to the Stats preview card component challenge

Solution retrospective

I initially had trouble sizing the ::after for the overlay with max-width: 100% and position: absolute but then i realised i had used position: relative on the parent image-conatiner.

This sized the overlay correctly when the screen size shrinks. However there is a tiny overlap on the colour overlay on the bottom of the container for the desktop and mobile version. Its only a few pixels overlap but i cant figure out out to get it to the exact same size as the image.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Mario Lisbona's solution.

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