Stats Preview Card

Solution retrospective
I definitely found this one tougher than the first project and it showed me that I still have a lot to learn. I think it's turned out good enough though. I would appreciate any help/feedback.
Few questions:
Why does 'overflow:hidden' work on the card border-radius instead of having to do it on each box separately? Also, when in mobile view in dev tools the mix-blend-mode overlay disappears. Can anyone advise how to fix this?
Thanks
Please log in to post a comment
Log in with GitHubCommunity feedback
- @markup-mitchell
The overlay on mobile is a bizarre one! I couldn't diagnose it precisely, but I think it's to do with the fact that your overlay's
height: 100%
inherits an explicit value from... somewhere in its parentage, although I suspect it might ultimately be based on a width value (!). I'd love to know the precise explanation!For a quick fix, change
min-height
toheight
on.box-2
(although that causes some secondary problems). I'd look for a different approach to implementing the image behaviour TBH.Not sure I understand your question about
overflow
- the card is the container, so you're telling it to hide any contents that overflow the border. Changing the radius of the border's corners then masks content that would otherwise stick out. Does that make sense?
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