Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Testimonials Grid Section

Adhyatma 470

@r00kieAd

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Revised Grid layout. Will improve the grid structure next time.

What challenges did you encounter, and how did you overcome them?

Had some difficulties setting the contents of grid items while managing the widths of each grid item on different screen sizes while main div was centered. To avoid this, instead of centering the div, I added a translateY of dynamic viewport height which will push the div to some extent to make it look centered.

What specific areas of your project would you like help with?

managing the content sizes while main div was centered and screen sizes were changing.

Community feedback

P

@Jomagene

Posted

@r00kieAd

Congratulations on completing the challenge and crafting a responsive design that looks fantastic on both desktop and mobile views! 🎉

You're definitely on the right track. I noticed that you put in a lot of effort with the grid system, which is commendable. To elevate your grid system even further, consider simplifying it by letting the grid handle most of the layout automatically. This will allow you to focus more on the overall structure, only intervening where necessary. This approach will make your code cleaner, more maintainable, and easier to work with in the long run.

For example, you might try something like this:

.grid-container {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5625rem 1.875rem;

  .i1, .i4 {
    grid-column: span 2;
  }

  .i5 {
    grid-area: 1 / 4 / span 2;
  }
}

This method elegantly simplifies the layout while keeping everything flexible and easy to adjust.

Keep up the great work, and remember, I'm here if you need any further guidance! Has this feedback been helpful to you? 😊

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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