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 solution using Tailwind CSS

#accessibility#tailwind-css

@Psargar616

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


I learned to make grid layout using Tailwind CSS. This layout can be used in future projects and my portfolio website for adding testimonials.

Community feedback

P
Jeuri Morel 1,405

@JeuriMorel

Posted

The easiest way to center an item is to make its parent a flex box, so I would give the body the following:

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

the min-height is so that it takes up the full screen. This will perfectly center the grid section once you remove the margin-top on it.

The grid section appears to be too wide, so I would give it a max-width of something more pleasing and closer to the design, maybe 1200px or so.

Marked as helpful

0

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