Frontend Mentor | Four card feature section coding challenge solution

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

@GerbenDol

Posted about 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!

Arun• 285

@arun-roberts

Posted about 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.

Gerben Dol• 3,115

@GerbenDol

Posted about 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! ✌️

Four card feature section

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community