Skip to content
Submitted almost 4 years ago

Mobile first workflow using CSS Grid

CodingDuck•390
@KaskaS-O
A solution to the Social proof section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi!

Any feedback will be great! :) I had one small problem - it seems that row gaps make the content overflow grid-container. Changing grid-template-row from auto to 1fr or anything else wouldn't fix it. I tried setting min-height too but no success. Any ideas? Thanks for help!

Kaska

Code

Please log in to post a comment

Log in

Community feedback

  • Gregg Christofferson•295
    @gchristofferson

    Hey @KaskaS-O ✋

    Great job, it looks really good!!

    I looked at your code and the reason your testimonial boxes are overflowing the grid-container is because of transform: translateY(10%) on your .opinions:nth-child(2) and transform: translateY(%20) on your .opinions:nth-child(3).

    Instead try selecting .opinions:nth-child(1) and setting `transform: translateY(-20%)'

    Then select .opinions:nth-child(2) and set transform: translateY(-10%). Then adjust your row-gap accordingly. This way you are moving the elements inside the grid and not outside of it. Let me know if that works for you.

    Marked as helpful

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