Design comparison
Solution retrospective
I made everything with flexbox but I will definitly recode the style with grid (for the main layout), it should be easier!
Any idea to hide the border on the cards bottom angles?
Thanks!
Community feedback
- @mycrochipPosted over 2 years ago
Hi WandoCode, A wonderful solution you've got here. I love it!
With regards to your concern about the extra pixels of the parent element showing beneath the child's, you could remove the bottom border radii on the child element and set the parent to:
.parent { overflow: hidden; } /*where "X" and "Y" are set to sizes of your choice*/ .child { border-radius: Xpx Ypx 0 0; width: 100%; display: block; }
While you are at that, you could also fix your HTML validation issue, it's a great way to learn (it's already so commendable that you've got just a single issue ^_~).
Marked as helpful0
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