Skip to content
Submitted over 1 year ago

Responsive Four card feature section using CSS Grid

Abhinav•240
@IamAbhiDev
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 the second solution I am submitting for this challenge! Instead of specifying margin and padding for every element, I used CSS Grid to improve the layout and make it more responsive. It was a little challenging for me while making the responsive layout of the site as I am not used to making such layouts using CSS Grid but I tried my best. I would love to hear your feedback on this and help me improve my code as much as possible. Thank you for your time!

Note - I had to darken the light text due to accessibility issues (contrast error)

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, Abhinav! 👋

    Here are a few suggestions for improvements:

    • Remove the visually hidden heading: You do not need to add more content to the page. If it needs to be added, a visible heading should be preferred.
    • Invalid BEM: If you are following the BEM methodology for your class naming convention, section__card__content is BEE (Block Element Element). I recommend creating a new block (card) and then having an element for the new block (card__content).

    Great job on fixing the contrast issues! That is a good initiative.

    Nice work on the CSS. You are using clamp() for fluid typography and rem unit for font sizes. The grid layout works well too.

    I hope this helps. Happy coding! 😄

    Marked as helpful
    1
    Abhinav•240
    @IamAbhiDevPosted over 1 year ago

    @vanzasetia Thanks a lot for your feedback! I'll make sure to apply this as soon as possible and improve my code. Thank you for your time! 😃

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    @IamAbhiDev You are welcome! 👍

    0

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