Skip to content
Submitted almost 4 years ago

Responsive Testimonial Section Using Gridbox

Jesse•110
@vinshield
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

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! 🤗

Community feedback

  • Grace•31,010
    @grace-snowPosted almost 4 years ago

    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 ☺

    2
    Jesse•110
    @vinshieldPosted almost 4 years ago

    @grace-snow Okay thanks grace-snow! I've seen that it's common for web designers to do font-size: 62.5% on the root in order to make their rems easier to work with. Is that poor practice too? I did it to avoid to complications that come when people try to zoom in on a page that uses only pixels and not rems. Should I just ignore that and stick to pixels?

    0
    Grace•31,010
    @grace-snowPosted almost 4 years ago

    @vinshield oh no its important to still use rems so all is scalable.

    Personally I am against resetting the root size to anything. I see no benefit to making 1 rem into 10px, we just don't need to work like that any more.

    I think it was more important when rems were first introduced and most layouts were floated ones with carefully calculated grid column widths. A few misplaced pixels could break those layouts.

    But we don't have those issues with modern layouts using flexbox and grid.

    All you get from changing that root rem size down is a need to redeclare a lot of font sizes on things that wouldn't need them otherwise, and potential issues with accessibility

    0
    Jesse•110
    @vinshieldPosted almost 4 years ago

    @grace-snow Okay then, thanks

    0

Please log in to post a comment

Log in with GitHub

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