Flexbox and Regular Css

Solution retrospective
What should I have done differently?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @mattstuddert
Congrats on your first submission, Mishu! You've done a good job! Here are some thoughts:
- You don't need the extra container with the
box-shadow
around it. You can see in the design comparison how it should look. - You could use
text-transform: uppercase
on the headings to uppercase them like in the design. - I'd recommend only ever using a single
h1
on a page. For these headings,h2
would be perfect. - When it breaks to a single column layout, the elements stretch all the way to the edge of the browser. I'd recommend giving some space, like in the design. You could also break into a single column a bit later.
- Have you ever tried using
min-width
media queries instead ofmax-width
? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.
I hope these tips help. Let me know if you have any questions!
- You don't need the extra container with the
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