Skip to content
Submitted about 2 years ago

Four card feature section using responsive CSS grid

C Lewis•110
@casserole27
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

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,170
    @VCaramesPosted about 2 years 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
    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