use :nth child and grid template area

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Jetyun, well done here! I think everything looks pretty good and well put together, and it could look even closer to the design with a bit more padding and spacing. There are only two things I'd do differently:

  1. In the grid column values, I would use 1fr or minmax with 1fr instead of having a fixed unit, and I'd also not use a fixed width on the individual cards. I'd also change the gap to something smaller, like 1.5rem or 2rem.

  2. I think you can change the breakpoint to something smaller. Right now your breakpoint is at 1440p; you can try something closer in the range of 1000/1100px. You can also try thinking about the views between 1440px and 375px. When I started these FEM challenges, I also built my solution with only the desktop and mobile widths in mind, and it's only later when I realized it's best to consider all widths!

  Great job on the whole, and happy coding! 😊

  Marked as helpful

  0
• 

  Adriano•38,060

  @AdrianoEscarabotePosted about 2 years ago

  Hello everything is fine?

  I really liked the result of your project, but I have some tips that I think you will like:

  I noticed that the page contained a scroll bar, I made some changes to the code to solve this:

  .mainbox { grid-template-rows: 200px 260px; }

  I also made two changes to .review_box

  .review_gridbox{ /* height: 700px; */ grid-template-rows: 250px; }

  I removed the height, and removed the two lines.

  I made some changes to the body:

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

  I centered the content.

  The rest is really good! Hope it helps... 👍

  Marked as helpful

  0