Hello there! Congratulations on completing your project!
I've noticed a small issue on the desktop version where scroll bars are appearing. This seems to be due to the container having a top margin set at 7%. To resolve this, consider the following adjustments:
remove the top and bottom margin and set it to
margin: 0 auto;
And to center the container in the middle of the body add this to your body style:
display: flex;
flex-direction: column;
justify-content: center;
As for your feed back for CSS grid here is how i did it and I found it simpler to understand and implement:
try to use grid areas instead of manually putting every card on its column/row for example:
on your grid do this:
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
"daniel daniel jonathan"
"jeanette patrick patrick"
"kira kira kira";
What this does is first, stablish the amount of columns (3) and rows (2) in this case for the desktop layout. Then the template areas how i see it is like a visual representation of how each element on your grid is going to be placed.
Then in the style of each "card" assign the grid area that it corresponds into your grid template like this:
.daniel {
// ... your styles other styles
grid-area: daniel;
}
That will make your "daniel card" two columns wide and be placed on the top left.
I hope that makes sense :D
good work and keep coding!
