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

Testimonial Grid Section

@namankandol

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 was facing problems to center the grid the grid in desktop version of the website. Can you please tell me how to center a grid?

Community feedback

Jesse 430

@jesse10930

Posted

Hey Naman! Your project looks great! To solve your centering issue, one thing you could try using flexbox on the '.container' class.

display: flex;
align-items: center;
justify-content: center;

'align-items' should center the grid vertically and 'justify-content' should center the grid horizontally. You would probably have to remove any margin/padding that you have on the '.container' and '.mainbox' classes and perhaps set the 'height' or 'min-height' of the '.container' class to '100vh' to ensure it centers the grid relative to the height of the screen rather than the height of its parent element.

Hope this helps!

1

@namankandol

Posted

@jesse10930 I really appreciate your effort. thanks for helping sir😁.

0

@detachedsoul

Posted

To center a grid, you can just do

place-items: center;

I would also suggest you giving the body a little padding at the bottom.

0

@namankandol

Posted

@detachedsoul sure i will take care of it next time🙂

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