Responsive social proof section using Flexbox

Hey @kens-visuals!

That's perfect! I'm always looking for ways to make my code more succinct like this. Do you know if there is any hit in performance when using transform: translate() as opposed to using relative positioning? It's probably not significant if there is a difference, but I'm curious🤔

Hi @gchristofferson 🙋🏻‍♂️

I'm sure about the performance, but I know for sure that, positioning things are a lot trickier than, using translate. Especially position absolute, I'm not discouraging the use of position, but one should be careful with it 🙃

Hey @kens-visuals!

That makes sense, I'm going to default to using translate for moving elements going forward. Thanks again for your feedback!

Nice job @FrassDaddy! 👍

Hey @erelita!

That's awesome! I tried to position the boxes with flexbox too but couldn't get it to work like I wanted. That's awesome you were able to get it to work! 👍

@gchristofferson

I looked into your HTML again. If you would want to try it again, you can add a wrapper class outside each of the social-rating and testimonial classes. Then you can apply the display:flex on the wrappers :)

Hi @erelita! 🙋‍♂️

I tried your suggestion and I was able to align and offset the boxes using flexbox instead! To get it to work though, I also had to set a height for the wrappers. Then I was able to use align-self: flex-end and flex-start for the appropriate :nth-child.

Here's the preview link: https://social-proof-section-928xy06ss-gchristofferson.vercel.app/

Here's the code: https://github.com/gchristofferson/social-proof-section/tree/flexbox-alignment-test

Thanks again for your awesome tips!

@gchristofferson I'm happy you tried it and it looks great! :)