Skip to content
Submitted almost 3 years ago

Responsive Four Card Feature Section | Flex | Grid | BEM

Kunal Munda•200
@ryu-kamiski
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Appreciate it if you give feedback!😊

Also queries to ask:

  1. Anyone who did this challenge and not faced difficulty with the card section please share your code and how you did it.
  2. Also in the mobile and tablet view should I give margin top of the main container?

Community feedback

  • Victor•510
    @therealmaduanusiPosted almost 3 years ago

    Mine isn't the best but maybe you can find something useful 🤷 Check it on my profile solution.

    Also adjust your font weight 🙌

    1
  • Vitali•130
    @Vitali147Posted almost 3 years ago

    Hi Kunal, feel free to visit my solution as well and check the code on github. I believe flexbox is the best approach to complete this challenge, this way your cards will be responsive to the screen size with 1 column on mobile, 2 columns on tablet and 3 columns with slight adjustment on desktop view. Other than font weight /size , missing icons and tablet layout it looks great.

    And I also suggest addressing HTML and Accessibility issues

    0

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