Skip to content
Submitted 10 months ago

Responsive feature cards

bem
Alex•120
@CaplexW
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

For the first time I made a layout with mobile-first approach. I’m also satisfied that I was able limit media-queries to just one. Next time I wanna use Sass in my project.

What challenges did you encounter, and how did you overcome them?

For the fist time I used CSS-Grid. I had to do some research but eventually I was able to use it.

What specific areas of your project would you like help with?

No specific questions or problems. I made it perfect on my level of understanding, but I'd like to get some feedback, because I'm sure I missed something and there's a lot of stuff I don't even know about.

Code

Please log in to post a comment

Log in

Community feedback

  • Yacoub AlDweik•3,570
    @YacoubDweik

    Oh Alex it is amazing!

    I guess you have the figma design for all screens, I would only say that your design overflows under 330px and at the same time when your design reaches any breakers (those values for media quieres) it looks a bit odd, I mean the cards are too wide.

    These two issues caused by the same thing which is the width of the cards so try to solve that by changing the width of the container and the cards for some of those media, btw in such designs where you can clearly see it is like a table then the grid would be a life saver here and make the life easier cuz grid is the best when it comes to 2D while flex is the best when it comes to 1D.

    Keep it up!!

    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