Design comparison
Solution retrospective
I made an effort to use grid and not flexbox. When it came time to switch from desktop to mobile design, I couldn't do it. I had to put my container on display: block and I had to set a margin-top: 3rem because my container was being cut off at the top. Is it normal that I have to do this or did I do something wrong? All advice is valuable to me!
Community feedback
- @tyran0Posted over 1 year ago
Hi, Giulia. When I was doing this challenge I used mobile-first approach. So, I started with screen width of 375px, put down my content, which is essentially just three blocks with different background colors. Then, for
@media (min-width: 560px)
, I addeddisplay: grid
andgrid-template-columns: 1fr 1fr
to the container, and alsogrid-column: 1/3
to the first child. If you need reference, then here's my styles.css. Hope this helps!1
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