Design comparison
Solution retrospective
Responsive testimonials grid section
Community feedback
- @luwa-starPosted about 4 years ago
This is a very good attempt at making a grid. However, there are a number of issues with this design. First is responsiveness, you used absolute units, for you to have a responsive design you need to use relative units like rem, em, %, vh and vw. So when the screen is reduced or increased, it is exactly what you want it to be. Also, because of the units used there was an overflow which is completely unnecessary. For better responsiveness you can use add about two more breakpoints for medium, large and extra large screens. Second, there is a lot of negative space, the margin and padding is not so good. The grid is not centered. It's best to wrap the grid in a container then play around with margins and paddings until you get the desired effect. Third, the testimonial image is so small, you have to squint your eyes to see the face of the persons. You need to increase the image size. Still on this, just for effectiveness use border-radius:50%. This way no matter how large the image size you'd still get the rounded image you are going for.
1
Please log in to post a comment
Log in with GitHubJoin 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