Skip to content
Submitted over 2 years ago

Four Card Features Sections

Amanda Buttineau•200
@ab1820
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was my first time using CSS Grid, it seems to have worked out well, except the responsive part. I had to use more than I wanted too media queries as my grid wasn't responsive for some reason even after messing around with the minmax(), auto-fit, and auto-fill.

  • If you have a solution to fix that and make my life easier, let me know. Thanks!
Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hi there 👋:

    • You just completed a solution as per the design Congratulations..🙌
    • But, There's some report in accessibility which causes accessibility error

    RESOLVING THE ERROR

    • The div with class .container is meant to be a main element
    • Because using semantical elements to structure the HTML improves the accessibility for screen readers
    • So change the div into main element
    • And finally, consider to remove the .attribution (footer) for better viewing experience

    GREETINGS:

    • Happy coding..🙌
    • Peace be upon you with god's mercy & blessings..✨
  • Account deleted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • The “Icons” serve no other purpose than to be decorative; They add no value. Their alt tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    • 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.

    Here is an example of how it works: EXAMPLE

    • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

    Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

    https://www.joshwcomeau.com/css/custom-css-reset/

    https://meyerweb.com/eric/tools/css/reset/

    http://html5doctor.com/html-5-reset-stylesheet/

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding!🎄🎁

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