@RegexRiddler
Posted
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.