Submitted about 1 year ago
3-column Preview Card Component With Flexbox and Media Query
@Genii-X
Design comparison
SolutionDesign
Solution retrospective
- In making the border radius around the container is there a way another to specify if the container is not the edge of its parent?
- I suspect there a simpler way to make it responsive without using both flexbox and media query, any suggestions?
- It is possible to have the elements stay in a row with intrinsic sixing?
Community feedback
- @zoedarkweatherPosted about 1 year ago
- You could select based on which child it is of the parent (nth child) or something but that is seriously over-complicating when you're already selecting the element to style it with a background color, etc and it's like one more line. I think the way you are doing it is probably the best way to do it.
- If you start with mobile and do media query for desktop everything is usually simpler. In this case, you could maybe just let your flexbox wrap. You'd probably still need a media query though to change which corners have border radius.
- I'm sorry I'm not sure what you mean here exactly on this one? To put your elements in a horizontal row, you can use flexbox or grid, and flexbox is often the solution for one-dimension like this. So I think you're doing it right using flexbox here! Hope this is helpful. :-)
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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