Design comparison
Solution retrospective
I faced some issues doing this challenge, if you know better way to do it or some suggestions to improve my code please let me know.
Community feedback
- @akshay63Posted over 3 years ago
Hey @Doaa. The thing that made your layout a bit confusing is that you have used display: grid for the container but in the media query you've used the "Mobile-first" approach where you have used the "display: flex;" property. This is where all the problems related to layout issues lie.
If you want to use grid, use only grid for the placement of the component & set display: grid; to the container and once you set this then you don't have to specify the display property in the media queries. Just use its properties for alignment and position.
for ex: .container{ display:grid};
@media screen and (min-width: 800px){ grid-template-rows: repeat(2, 1fr); }
Hope it helps.
0
Please log in to post a comment
Log in with GitHubJoin 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