Responsive Testimonial grid section using grid

Community feedback

• 

  Maan Al-Hababi•190

  @MaanAlHababiPosted 4 months ago

  Hey, Teezee86!

  Great job for completing this challenge. Might I bring to your attention the fact that at mobile size, the grid seems to be dislodged upwards where a lot of content is not visible. This is caused by setting height properties to the html and body tags:

  html {
      height: 100vh;
  }
  
  body {
    height: 100%;
  }
  

  Setting a height to the html tag is pretty much redundant, this way you're explicitly limiting the size of your page when you can simply do that by styling your content neatly, specifically being aware of overflowing content that causes breakages. In summary, adding a height tag is useless, and in this case, it has caused trouble.

  Simply removing these properties should do the trick. Similarly, adding a width and max-width properties to the body tags is also redundant. Keep in mind, setting the max-width to a percentage value is meaningless since more often than not it does not actually give you the desired effect.

  Removing this part of your code should fix the breakage I mentioned, removes redundant lines of code, and sets you up to manage aligning your content and using up the space available to you better.

  html {
      height: 100vh;
  }
  
  body {
      height: 100%;
      max-width: 100%;
      width: 100%;
  }
  

  Happy coding!

  Marked as helpful

  1