Design comparison
Solution retrospective
doing good
What challenges did you encounter, and how did you overcome them?location of items
What specific areas of your project would you like help with?with grid
Community feedback
- @RegexRiddlerPosted 6 months ago
Great job completing this challenge! ππ
- I have a few comments for you regarding your grid.
I like your implementation of named grid areasπI might refactor my CSS to do the same as it's very readable and maintainable.
-
There is no reason to statically set the height of each grid item because you are setting the position and span of each item in the grid. Removing the height property on the grid items will make your page look more like the design.
-
The reason Patrick doesn't align properly on medium screen size, and why the testimonials aren't matching the design, is because you mistakenly made too many columns for both medium and large screen sizes.
This is your code.
@media (min-width: 481px) { .container { grid-template-areas: "daniel daniel jonathan kira" "jeanette patrick patrick kira"; } } @media (min-width: 1440px) { .container { grid-template-areas: "daniel daniel daniel jonathan kira" "jeanette patrick patrick patrick kira"; } }
Here is a suggestion on how to fix it.
@media (min-width: 481px) { .container { grid-template-areas: "daniel jonathan kira" "jeanette patrick kira"; } } @media (min-width: 1440px) { .container { grid-template-areas: "daniel daniel jonathan kira" "jeanette patrick patrick kira"; } }
Here is my submission, and my GitHub repo if you feel like comparing code.
0 - @Sylvester009Posted 6 months ago
What excellent work you are doing, keep it up. In regard to needing help with the CSS grid, if you don't mind me recommending "w3schools" for you, you can check out their teachings on CSS grid because it has also helped me a lot in my understanding of grid.
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