Skip to content
Submitted about 3 years ago

Flexbox && Responsive Design

accessibility
Chris Andrews•170
@ChrisAndrewsDev
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey guys!

I decided to do another smaller project, as I've found they tend to have unexpected hidden difficulties (and because I'm procrastinating on starting the FYLO dark landing page 😅)

I would love some feedback on the way I've positioned the elements and the media-query styles, as I've got a sneaking suspicion that my code can be reduced quite a lot with a different approach to layouts from the start.

I'm open to all suggestions!

Thanks in advance 😁

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Elaine•11,360
    @elaineleung

    Hey Chris, great work with this component, and I know exactly what you mean about working on smaller projects while in the middle of a bigger one. In fact this week instead of working on my challenge, I'm building a small reference component library on my CodePen where I try out different approaches of writing components like this one. I just made a 3-column one with flexbox where I use flex-wrap instead of changing flex directions in the media query, and it might address what you're asking in your question. Like you, I also fall into writing a lot of code when building out the component and it's only later when I revisit my code as reference that I see a lot of things I can cut out.

    Here's my component with flexbox and one with grid that you can check out.

    Marked as helpful

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