Responsive social proof section using Flexbox

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @gchristofferson 👋🏻

  I'm not sure if my solution is the elegant one that you're looking for, but what I did is similar. However, instead of using position: relative I just selected them with :nth-child() and with transform: translate() positioned them as necessary. Here, if you need some review check the link.

  Cheers 👾

  Marked as helpful

  1

  ---

  

  Gregg Christofferson•295

  @gchristoffersonPosted about 3 years ago

  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🤔

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  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 🙃

  Marked as helpful

  0

  

  Gregg Christofferson•295

  @gchristoffersonPosted about 3 years ago

  Hey @kens-visuals!

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

  0
• 

  Shawn•90

  @ShawwnscottPosted about 3 years ago

  I added helper classes for mine.

  for the reviews then added margins and used percentages so the sizing remained somewhat consistent with resizing.

  for the testimonials I used the transform: translateY property and also used a different percentage for each.

  https://brave-shockley-288b01.netlify.app/

  Marked as helpful

  0

  ---

  

  Gregg Christofferson•295

  @gchristoffersonPosted about 3 years ago

  Nice job @FrassDaddy! 👍

  0
• 

  Erel Ropeta•385

  @ereljapcoPosted about 3 years ago

  What I did was used flexbox, then used justify-continent for the reviews and align-self for the testimonials :)

  Marked as helpful

  0

  ---

  

  Gregg Christofferson•295

  @gchristoffersonPosted about 3 years ago

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

  0

  

  Erel Ropeta•385

  @ereljapcoPosted about 3 years ago

  @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 :)

  Marked as helpful

  1

  

  Gregg Christofferson•295

  @gchristoffersonPosted about 3 years ago

  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!

  0

  

  Erel Ropeta•385

  @ereljapcoPosted about 3 years ago

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

  0