Skip to content
Submitted almost 3 years ago

Four card challenge with Flex

Francis•260
@FrancisKhaledKhodja
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

Small difficulty with the margins between the cards: with flexbox, i have the feeling that the margins add up between the cards.

Community feedback

  • Han•340
    @hcxwebPosted almost 3 years ago

    Hello Francis, You solution looks pretty good! To help with your margin issue, try this:

    1. get rid of margin: 1.5rem for the card class,
    2. add gap: 1.5rem for cards class and cards-middle class,
    3. get rid of margin: 1.25rem for the card class for mobile media query You can use gap for flexbox, which works kind like gap for grid.
    Marked as helpful
    1
    Francis•260
    @FrancisKhaledKhodjaPosted almost 3 years ago

    @hcxweb thanks

    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