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

Social proof section with Flexbox + Grid

Eduardo 910

@KTrick01

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, this was fun to make! I had a little bit of a hard time doing the displacement of the containers, if you know a better/easier way to do it, please give me your feedback, thanks.

Community feedback

Opeoluwa 330

@Opeoluwa-Ogunlaja

Posted

Hey Eduardo,

  • Sass has a for loop feature that can simplify things for you. E.g;
@for $i from 1 through 4 {
  .socialProof__reviews:nth-child(#{$i}) {
    margin-left: calc(#{$i} * 1rem) (... Just an example)
  }
}

- Not really a direct solution though, but it would be good to learn sass for future purposes.
- Hope this was helpful 🙂
0

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