Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3-column Preview Card Component With Flexbox and Media Query

Genii 90

@Genii-X

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@zoedarkweather

Posted

  1. 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.
  2. 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.
  3. 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 helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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