Skip to content
Submitted over 4 years ago

Four card feature section

Arun•285
@arun-roberts
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

First encounter with the grid. POWERFUL. Did I include any superfluities? Media queries etc?

Also, particularly interested in feedback on code layout and CSS best practices.

I added an extra breakpoint because I didn't like how the cards looked when either over stretched or squished in. Are there any better ways around this?

Cheers, Arun.

Community feedback

  • Gerben Dol•3,115
    @GerbenDolPosted over 4 years ago

    Hey Arun! Your solution is looking really good. Nice job on adding the extra breakpoint for an additional version of your layout. 💪🏻

    There usually aren't super easy ways around adding multiple breakpoints and I don't think that's a bad thing.

    You could use some clever wrapping on grid or flexbox to avoid this in some cases. I recently read this clever article which you might find interesting!

    1
    Arun•285
    @arun-robertsPosted over 4 years ago

    @GerbenDol

    Thanks! Great article, too.

    I had a peek at your solution for this one. So tasty. Using :nth-child and ::before to add those background colours! The way you arranged and ordered your CSS. Going to be studying that one for a few more days to come.

    1
    Gerben Dol•3,115
    @GerbenDolPosted over 4 years ago

    @arun-roberts Great to hear it's helpful! During weekdays I'm usually available on Slack, so be sure to reach out for me there if you ever want to chat about it! ✌️

    1

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