@MichaHuhn
Posted
Looks really good, well done!
About your question:
Frist we can start with the centering. I would structure the HTML in the following way:
<body>
<main>
<ul class="testimonial-list"><ul>
</main>
</body>
An unordered list could be a good semantic HTML element for the testimonials, but it doesn't have to be a list. You can also use a div.
We don't need margin or padding on the body, because we can handle centering in a different way as explained below.
The main should span across the whole viewport as usual. This way we could change its background color for example. In addition, we can use the main for centering the testimonials like so:
main {
display: grid;
place-content: center;
}
place-content: center; centers everything horizontally and vertically.
After that, we apply a max-width to the testimonials to prevent them from spanning across the whole viewport. In the Figma mockup it's max-width: 1110px;. For accessibility we can use max-width: 69.375rem;.
We can remove grid-template-columns and grid-template-rows and use grid-auto-columns: 1fr; instead. This will create equal columns automatically when using grid-template-areas. The rows will also be created automatically.
Finally, we can introduce a media query to make the site responsive. I did this challenge with a mobile-first approach. That means I wrote all the styles for the mobile view and then updated the styles for desktop with the help of a media query. In this case we can use this media query:
@media (min-width: 68.75rem) {
grid-template-areas:
'one one two five'
'three four four five';
gap: 1.5rem 1.875rem;
}
68.75rem is equal to 1100px. That's a good size, because there are not many devices in this area.
On mobile you can stack the testimonials like so:
grid-template-areas:
'one'
'two'
'three'
'four'
'five';
With this approach the grid layout adapts automatically and it also works on mobile through the media query.
I hope that's a bit useful.
Here is also a solution as a YouTube tutorial.
