Skip to content
Submitted almost 3 years ago

Social proof using flexbox

Han•340
@hcxweb
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone, this challenge took me the most time and effort by far compared with previous ones. Making it really responsive and matching the pixels are no small task. One thing I couldn't figure out is how to make the user review cards expand vertically in sync (right now the card that has more content will expand first). I would really appreciate it if any one can offer any insights or suggestions. Thank you!

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Han,

    Great job, well done for persevering with it 🔥

    In answer to your question, i would:

    • add flex: 1; which is a shorthand for the flex-grow, flex-shrink, and the flex-basis. Its default value is 0 1 auto, which means: flex-grow: 0; flex-shrink: 1; flex-basis: auto;. The boxes will grow and shrink from a flex-basis of 0, so you will end up with equal sizes
    • i would also remove margin-top off the 2nd and 3rd box and use transform: translateY(XXpx); to match the staggered effect

    Happy coding 🤙

    Marked as helpful
    0
    Han•340
    @hcxwebPosted almost 3 years ago

    @darryncodes Hi Darryn, Thank you very much for the suggestions!! I've improved the web page and am very happy with it!

    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