Skip to content
Submitted almost 4 years ago

3 column card using CSS Flexbox and Media Queries

Rachana Hegde•155
@rachanahegde
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was my first time using CSS flexbox to build a website but I used media queries to make it fairly responsive to most screen sizes. Any feedback on ways to make this website more responsive or accessible would be helpful. Thanks! :)

Update: Thank you all for the feedback so far. I have addressed the accessibility issues and looked into the resources that were recommended.

Code

Please log in to post a comment

Log in

Community feedback

  • Muhammad Shajjar•1,100
    @muhammadshajjar

    Great work! but always try to make it better,

    To overcome your accessibility issue you would need to add some semantic markers to designate sections of the page as the header, navigation, main content, and footer e.g:

    <header>
////
</header>

<main>
////
</main>

    Thanks,

    Marked as helpful
  • Ahmed Faisal•5,095
    @afrussel

    Hi, well done. As a first work is awesome.
    You can use a small library for flexbox named flexboxgrid.com. it helps you to make your site responsive with less css code.

    Marked as helpful
  • spyder•315
    @ratan17

    may i know why you didn't go flex properties to center your .cards container ?

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