Pure CSS solution with hover/active effects

Solution retrospective
I tried to apply border-radius: 1.5rem
to the main
tag but it didn't work. Had to individually target every corner. Why is that? Any kind of feedback is welcome.
Please log in to post a comment
Log in with GitHubCommunity feedback
- Account deleted
Hi.
The issue is because children elements are overflowing so their borders are shown.
The solution is to remove all the
border-radius
that you have and leave it only in the main tag + you must use theoverflow: hidden
property, so children's borders aren't displayedmain { ... border-radius: 1.5rem; overflow: hidden; }
- @shashilo
Emmilie, this looks exactly like the design. I can't even tell the difference! Great job! I did find a few areas of improvement besides the border-radius.
- The hover states should transition together. Currently, on desktop, when you hover on the CTA, the shared bubble transitions a little later. Onmouseleave, the button transitions quickly and before the shared button. There's no cohesion right now.
- Missing content
box-shadow
. - The CTA doesn't work well on mobile. Either use an input button and make it pure CSS or use Javascript to toggle the states as the mobile user clicks on the CTA.
- @rfilenko
Hey, generally setting border-radius and overflow:hidden on parent container works, but for popup you probably need to use js, coz on mobile hover wouldn't work. Nice solution though
Cheers, Roman
- P@tarasis
Near pixel perfect, love it Em!
Main thing I see behaviour wise is that the share icon often doesn’t return to the base Color when dismissed. It stays darker grey with white. (On my iPad, where I do most of my browsing)
(Aside I wish your current mentor score was 1701 rather than 1710 🖖)
- @En-Jen
Hi Emmillie, really nice solution!! Basically pixel perfect 👌 Really nice, organized, readable code too. I'll have to study more of your projects to learn some things from you! I just have one super minor suggestion for something you could fix. It looks like on a small mobile screen size like an iPhone 5, the attribution overlaps with the content on the page.
- @alicepsz98
Tente com px, em vez de rem.
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