Design comparison
SolutionDesign
Solution retrospective
tried my best to make it fully responsive
Community feedback
- @kem522Posted about 3 years ago
Looking pretty good! Nice one!
Some CSS suggestions for you:
- You have multiple rule blocks for the same class name in the same media query, namely
.container
. It's best practice to have these all in the same block:
.container { display: grid; grid-template-columns: repeat(3, 1fr); height: 500px; width: 60%; margin: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px; }
-
On line 103 in your CSS you have a
flex-direction
rule but the value looks like it's for a grid rule. Be careful when switching betweendisplay: flex
anddisplay: grid
! It can get confusing -
As web developers we are normally expected to develop UI in a "mobile-first" approach. For CSS the best way to do this is to structure your style sheet with all the base styles being for mobile and then adding media queries for
min-widths
instead ofmax-widths
:
// this is my button styling on mobile .btn { max-width: 100%; } // this is my button styling on screens starting at 768px wide (tablets) @media (min-width: 768px) { .btn { max-width: 300px; } } // this is my button styling on screens starting at 1024px wide (desktops) @media (min-width: 1024px) { .btn { max-width: 200px; } }
Hope that's helpful!
Marked as helpful1 - You have multiple rule blocks for the same class name in the same media query, namely
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