Testimonial Grid (no RWD)

Hello @WiaterKa 👋🏾

Congrats on completing the challenge.

To solve your centering problem, try wrapping everything in a wrapper div or main container and center it using flexbox or grid.

body {
  background-color: hsl(210, 46%, 95%);
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 1100px;
  height: 572px;
}

For the above code you've written, declare a min-height first then use flexbox. Please do not give the body a fixed height or width after. The auto margin is also unnecessary.

One last thing, avoid using pixels for dimensions, font sizes, or spacing. You're better off using em or rem.

I hope you found this helpful, happy coding🥂

Good job! Liked your comments in the HTML to split up your grid sections. Quick tip for your centre issue. Use fractional units (fr) rather than percentages on your main tag (gird-template-columns)

main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 50% 50%;
  gap: 30px;
  margin: auto;
}

For the responsive side of things, the biggest tip I can give is to approach the design as mobile first. This does take a while to get used to but once you grasp the concept, you'll be writting much less code and having a much easier time with media queries etc.

The best way to think about it is if you just write the HTML without any styles, it will automatically be in a mobile state (everything stacked on top of each other). Then rather than worrying about positioning and gird at first you can add the design element styles to the text, containers etc.

Then you can think about adding gird, flexbox etc. and then use a min-width media query to set the desktop styles. Check out Kevin Powells video on mobile first for a good intro to this.

Hope this helps! Keep up the good work!

@wiaterka great job. But you have to make it responsive for mobile and wider screen. Because is all the same on mobile and laptop. I believe you can achieve that by media queries.