Submitted 5 months ago

Responsive layout using CSS Grid and Media Queries

Mohammed Majd•120

@MajdMohammed

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am proud I could finish one of the hardest challenges I made so far, Next time I will make Layouts using grid faster and without getting confused with grid elements.

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

challenges are:

Confusion what should be with grid and what should be with flex.
what are the proper values to set the grid templates.
how should I distribute the the grid and how should I manage it child elements.
How should I switch the layouts with grid in mobile screens using the media queries.
My main headers disappeared after shrinking the screen.

I overcome most of these questions thanks to moderators in the Discord community

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

I think I still need to practice a lot for a better understanding of the CSS grid layouts

Community feedback

BillRozy•170
@BillRozyPosted 5 months ago
It looks nice, but i think you used wrong breakpoint for desktop, it should start with 1440px, but in your example i see it starts from 1024 or something like this. Also, try to be more accurate with paddings, they differ a lot comparing with design. Good joB!
1
Mohammed Majd•120
@MajdMohammedPosted 5 months ago
@BillRozy Thanks for the feedback, I appreciate it!
0

Please log in to post a comment

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