Responsive Four Card Feature Section with CSS Grid
Design comparison
Solution retrospective
i used var local scope vars for colors as kevin powell suggests https://www.youtube.com/watch?v=_2LwjfYc1x8&t=1s
pretty cool)
What challenges did you encounter, and how did you overcome them?i wanted to have 3 columns with 1, 2, 1 items in them with a single row. for mobile - just stack them on top of each other, for desktop - just present them as columns.
however, i couldnt make 3 columns with different amount of rows in each one.
so i have just 2 central items in subcard container. next time i would like another attempt for solution without subcard container.
What specific areas of your project would you like help with?colored border radius on top of cards have tiny curve that i would like to get rid of. any ideas, guys?
Community feedback
- @1IMperaDOR0Posted 2 months ago
Good code my friend!
I believe the problem is that the top edges have a curve on the inside and should only have one on the outside, right? Look, in the resolution of the colored edges of each card, border-radius, I believe it would only be changed from 5px to 3px or increase the border-top from 3px to 5px. This was the simplest solution I found.
1@vladzen13Posted 2 months ago@1IMperaDOR0 yes indeed playing with values can hide the problem, but i was hoping to find cleaner css solution, which also complies with figma design
1@vladzen13Posted 2 months ago@1IMperaDOR0 so i found a way to solve it. if you set up border-radius for every corner individually - you can set curvature of the corner with 2 different axis.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius
so this seems like perfect solution: border-top-left-radius: 5px 3px; border-top-right-radius: 5px 3px;
you have 5px border-radius on top just like in figma, but you don't have strange arc below.
1@1IMperaDOR0Posted about 2 months ago@vladzen13 This is also a great solution. Thanks for sharing it.
1
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