Skip to content
Submitted about 4 years ago

Four Card Feature Solution using CSS Grid

Ashwini•100
@infiniteowl05
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

Hey Folks! This is the first project on Frontend Mentor and I am trying to improving my skills on Web Development. Any suggestions are welcome. I wanted to particularly understand the coding standard for media queries. Is my approach right?

Community feedback

  • Anna Leigh•5,135
    @brasspetalsPosted about 4 years ago

    Congrats on completing your first challenge! 🎉 It responds nicely and yes, you seem to have the right idea with media queries.

    A few suggestions:

    • set the background-color in the body rather than your container
    • adding margin: 0 and padding: 0 to your * as part of your css "reset"

    For your next project, I encourage you to try and do "mobile-first", usingmin-width instead of max-width for your media queries, since you would be going from smaller screens to larger ones. I was hesitant to do it at first, but I think it makes transitioning between layouts much smoother.

    Congrats again on submitting your first solution and happy coding!

    1
    Ashwini•100
    @infiniteowl05Posted about 4 years ago

    Thanks for the suggestions. Happy Coding!

    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