Customer feedback using css grid

Hi! Great Work Out There . I noticed that the Testimonials grid is not aligned center because it is missing a CSS property, which I recommend adding to the body properties (min-heigh:100vh). This property will help align the Testimonials grid properly. I hope this suggestion works and helps. Happy coding!

Hi @Ferabel 👋

Here are my recommendations, specifically about getting the exact size of the sample image you asked for. Hopefully, you find them useful!

• My strategy to get the exact size is: Start designing from larger elements to smaller ones. As mentioned by friends in the previous comments, using grid and flex is a simpler option. Then, I work on font size, line height, and characters' space.

• Consider using rem for sizing instead of px. Take a look at these two videos: link1 and link2

• You haven't used the h1 tag, which is essential for assistive technologies. For more information, please refer to the following resources: using-h1-tag

• Use a meaningful name for the alt attribute in img tags. In all images, you have used "pp". you know if the image does not load, this text will show.

Happy Coding! 🙌

Hey @Ferabel,

I'm back and identified your gap-problem. You gave every box a specific width. Remove that and give your parent container a max-width (for example 65rem). Now every box take the given space which is provided by the columns.

This should fix it ✌️

Hey There! Nice Work Done Here i have some notes that i hope it will fix all of your proplems:

• for the centering issue, u can use min-height: 100vh; on the body element, then wrap ur HTML code with a container <div class="container"></div> ----- as setting the body element to display: flex or grid is not a good practice ----- and give it the whole height of the page then give it a display of flex or and center content inside of it like this:

height: 100vh;

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

//center with grid
display: grid;
place-content: center; //it will center elements by the y-axis and x-axis

• for resizing boxes, i recommend u to set the boxes sizes in the grid-column-templet property by setting a fixed size instead of giving the 3 columns auto so the boxes will take their widths form the grid instead of taking it from the width property.

• for the gap issue, u should use the grid gap property grid-gap: rows-gap | columns-gap instead of using the gap property.

Hope this will fix all of ur issues and Happy Coding <3

Hey, i can fix your centering issue.

Use the min-height property for the body and center the minibody with place content This sould look like this:

body{
min-height: 100vh;
display: grid;
place-content: center;
}

with min-height: 100vh; you can be sure that the body always has at least the height of the browser window. You can implement it in every project before you start styling.

and what strikes me is that you created the columns of the minibody with auto. Instead of this you can use the fr Unit. This allows you to divide the available space into as many equal sections as you like. You can read read more about this here: https://css-tricks.com/introduction-fr-css-unit/

If you have specific questions feel free to reach me out 🤝

Hey Buddy🙌🏽,

Fantastic job👍🏽. I see you still find it difficult to center a div, don't worry the confusion is normal, you'll def get better with more practice.

How to perfectly center a div

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

I hope this is helpful, stay consistent, focus and don't skip fundamentals

Cheers Mate🫡