Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Testimonial grid section using grid

Teezee86 100

@Teezee86

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

making it responsive across browsers

What specific areas of your project would you like help with?

Still having trouble with font sizes in firefox

Community feedback

@MaanAlHababi

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord