Testimonial Grid Section

Community feedback

• 

  Carlos Marte•160

  @carlosmarte23Posted 29 days ago

  Hello there! Congratulations on completing your project!

  I've noticed a small issue on the desktop version where scroll bars are appearing. This seems to be due to the container having a top margin set at 7%. To resolve this, consider the following adjustments:

  remove the top and bottom margin and set it to

  margin: 0 auto;
  

  And to center the container in the middle of the body add this to your body style:

  display: flex;
   flex-direction: column;
   justify-content: center;
  

  As for your feed back for CSS grid here is how i did it and I found it simpler to understand and implement:

  try to use grid areas instead of manually putting every card on its column/row for example:

  on your grid do this:

      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas:
        "daniel daniel jonathan"
        "jeanette patrick patrick"
        "kira kira kira";
  

  What this does is first, stablish the amount of columns (3) and rows (2) in this case for the desktop layout. Then the template areas how i see it is like a visual representation of how each element on your grid is going to be placed.

  Then in the style of each "card" assign the grid area that it corresponds into your grid template like this:

  .daniel {
    // ... your styles other styles
    grid-area: daniel;
  }
  

  That will make your "daniel card" two columns wide and be placed on the top left.

  I hope that makes sense :D

  good work and keep coding!

  Marked as helpful

  0

  ---

  

  Ejiro Frances•260

  @Ejiro-FrancesPosted 27 days ago

  Thank you @carlosmarte23 for reviewing my project. I would definitely use the grid-area method. I thought using grid display meant avoiding flex display. I understand now that was a false notion. Thanks a lot. This is really helpful.

  0