Frontend Mentor | Four card feature section using responsive CSS grid coding challenge solution

Solution retrospective

This is my first Frontend Mentor PRO challenge with access to the Figma files. I worked HARD on precision and a responsive design using CSS grid and the least amount of code. I'm having some sizing issues and difficulties? I have specific pixel sizing both on grid columns and rows and the grid elements and I don't think that is necessary. The design works but I'm wondering about best practices and less clunky code. You can see specific examples in my repository. I also changed up the design a bit to enhance accessibility via contrast ratios and to create more visual interest.

Community feedback

バレンタイン 😈• 64,270

@VCarames

Posted over 1 year ago

Hey @casserole27, Great job on this challenge!

You can do the following to reduce the amount code needed and make your content fully responsive.

Change the width and height of each card to max-width and min-height. This make each card responsive. Remove all the other widths for the card components, you only the ones mentioned above.
You can remove the grid styling in each card, since by default, text is already aligned to the left and in a column. All you will need to do is use position absolute to position the icons (give all the icons the same class)
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.

Some other suggestion:

The headline-wrapper should be a Header Element. Since this the introductory part.
The Main Element should only wrap the card components since this the area you want you users to focus on.

If anything is confusing or giving you a hard time, let me know.

Happy Coding! 👻🎃

Marked as helpful

Four card feature section using responsive CSS grid

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community