Skip to content
Submitted over 4 years ago

Responsive Testimonial Section Using Gridbox

Jesse•110
@vinshield
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This project was more challenging than I had expected haha. But quite fulfilling. The most challenging part, surprisingly, was achieving that very soft shadow shown in the previews. After wrestling with it for a while, I finally achieved something close by adding a negative blur radius "box-shadow: 25px 25px 50px -10px rgba(0, 0, 0, 0.15);". Any tips on how to achieve this more accurately will be appreciated.

In my github repo, there are two branches. On my master branch, I used grid-section-areas, while on the responsive-grid-test branch, I simply used grid-template-columns and rows. They both work fine, but I think the master branch has the more elegant solution. Both are responsive.

Thanks for reading this long description, and any tips to improve my code will be appreciated! 🤗

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Hi Jesse,

    This looks fab, well done! Really nice semantic html and looks like the design to me.

    Two suggestions for your next challenge though:

    1. Don't do this on the root font-size: 6.25%;. This has the potential for all sorts of bugs on larger projects and could render site inaccessible to assistive tech users who rely on changing their root font size

    2. If you start with mobile first, you'll be following industry best practice and could end up with shorter simpler css overall.

    Hope these make sense and are helpful to you ☺

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