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

Testimonials grid section

@rhniam

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


This challenge was tough for me. If there is any other way for doing this please let me know. Any feedback will be appreciated. Thank You...

Community feedback

@pikapikamart

Posted

Hey, well for the desktop layout I had to zoomed out because you made it really large. I think you are working on a large screen right. Many users have a 1366x768 resolution, keeping that in mind will be really beneficial so that you support other user's dimension on your different websites:>>

  • Okay, so layout is good in desktop (zoomed out), the mobile is fine but resizing to reach the mobile state, your layout gets cuts of by the viewport, thus hiding and resulting in scrollbar at the bottom. Making a breakpoint on those will be really a good idea.

  • This is important, right now your body tag does not have height dimension, why? Because you set the cards to position: absolute which makes it go out of the flow. Removing this will be really good so that your body logically captures them. Then just remove the transform: translate(-50%, -50%); declaration in your cards container so that they will be align properly. Then just add some paddings in your body tag.

  • I recommend not using multiple h1 tag in a single page. You used them in the name of the person per card. Instead of this, use other heading tags. It may seem fine for use, but for user who uses screen readers, it can cause problems. It is much more of a accessibility purposes.

Other than those, great work, but please consider about that large layout so that others, like me won't have to zoom in out^^

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