grid

Community feedback

• 

  Maximilian Dybvik•200

  @RegexRiddlerPosted 7 months ago

  Great job completing this challenge! 😁🙌

  • I have a few comments for you regarding your grid.

  I like your implementation of named grid areas👍I might refactor my CSS to do the same as it's very readable and maintainable.

  1. There is no reason to statically set the height of each grid item because you are setting the position and span of each item in the grid. Removing the height property on the grid items will make your page look more like the design.

  2. The reason Patrick doesn't align properly on medium screen size, and why the testimonials aren't matching the design, is because you mistakenly made too many columns for both medium and large screen sizes.

  This is your code.

  @media (min-width: 481px) {
      .container {
          grid-template-areas:
          "daniel daniel jonathan kira"
          "jeanette patrick patrick kira";
      }
  }
  
  @media (min-width: 1440px) {
      .container {
          grid-template-areas:
          "daniel daniel daniel jonathan kira"
          "jeanette patrick patrick patrick kira";
      }
  }
  

  Here is a suggestion on how to fix it.

  @media (min-width: 481px) {
      .container {
          grid-template-areas:
          "daniel jonathan kira"
          "jeanette patrick kira";
      }
  }
  
  @media (min-width: 1440px) {
      .container {
          grid-template-areas:
          "daniel daniel jonathan kira"
          "jeanette patrick patrick kira";
      }
  }
  

  Here is my submission, and my GitHub repo if you feel like comparing code.

  0
• 

  Samuel Sylvester•330

  @Sylvester009Posted 7 months ago

  What excellent work you are doing, keep it up. In regard to needing help with the CSS grid, if you don't mind me recommending "w3schools" for you, you can check out their teachings on CSS grid because it has also helped me a lot in my understanding of grid.

  0