Skip to content
Submitted over 4 years ago

Four card feature section using CSS flexbox and grid

Gabriela C•195
@gcardenasdev
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

  1. Was my usage of Flexbox for the mobile version and Grid for the desktop correct? Should only one be used for both?

  2. Are there any ways I could have made my code more reusable or readable?

  3. Any kind of feedback is welcome!

Community feedback

  • Richard•960
    @Richard-08Posted over 4 years ago

    Hi, Gabriela! Good work!

    The answer to your first question: For # four-card section, you can use the "flex-wrap: wrap;". Then the blocks will be transferred and you can not use grid in the media queries.

    Good luck, Gabriela!

    2
    Gabriela C•195
    @gcardenasdevPosted over 4 years ago

    @Richard-08 Hi Richard! Thank you for the feedback! I decided to use grid for both mobile and desktop, I haven't quite figured out Flexbox yet but I'll definitely keep studying it and trying to implement it in future projects!

    1
  • L. Felipe Carrillo Alvarado•95
    @carrillodevPosted over 4 years ago

    Be careful with h1, they have a lot of power on SEO, when we have two or more h1 they lose a lot of power.

    1
    Gabriela C•195
    @gcardenasdevPosted over 4 years ago

    @carrillof I condensed it to one H1 and used to style the second half. Thank you so much for your feedback!

    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