@markup-mitchell
Posted
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 to height 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?
@GitNutts
Posted
@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.
