Design comparison
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
Community feedback
- @markup-mitchellPosted about 3 years ago
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?0@GitNuttsPosted about 3 years ago@markup-mitchell It's certainly frustrating. I have messed with changing the min-height to height but like you say, it creates another problem that I can't solve. If I were to do it again I would approach it differently but for now I've moved on to the next project to continue learning :)
Ah that makes much more sense now. Some things I understand straight away and others my brain doesn't work with haha!
Thanks for the help.
0
Please log in to post a comment
Log in with GitHubJoin 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