Submitted over 1 year ago

Landing page using GRID in css

Jesse Adjomo•130

@Bahbah89

A solution to the Testimonials grid section challenge

Preview Code

Solution retrospective

What did I learn?

Learning how to use diplay: grid, grid-template-columns / rows (repeat)
Using grid-column and grid-row for the necessary items in the container
using float and clear: both
Using position absolute and relative

What did I find difficult while building the project?

Making the same layout for smaller screens, my simple solution was to just add @media and use flex-direction: column. Any feedback on solving this is welcome :)

Code

Please log in to post a comment

Community feedback

Zubair Adham•400
@atmahana
Posted over 1 year ago
Hi there. Good job on finishing the project.

I'd suggest you to use the mobile-first approach. You can find this topic being discussed on Google and YouTube. Example below 👇
```
/* Write your mobile styling here */

@media (min-width: 640px) {
  /* Write your desktop styling here */
}
```
Also, since you initially specified a fixed width for the card, it won't adapt well to smaller screens. To make it responsive, consider replacing the fixed width with a max-width and set the width to 100%.
```
.card {
  max-width: 500px;
  width: 100%;
}
```
This approach ensures that the content adapts to different screen sizes and devices while providing a maximum width to prevent it from becoming excessively wide on larger screens. Hope this is helpful.
Marked as helpful

Join 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