Skip to content
Submitted over 2 years ago

Four card feature section using responsive CSS grid

C Lewis•110
@casserole27
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deleted

    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

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