Skip to content
Submitted almost 3 years ago

Social proof section challenge using css flexbox

Rodrigo Nascimento•220
@rodrigovn
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

Any feedback would be awesome! I have tried to do this as fast as I could. I have used a lot of flexbox, let me know if the code is too redundant. I have a question: How do I write the part which change the size of the screen: @media only screen and (min-width: 800px), how is the most common way to do this? Thanks for reading >.<

Community feedback

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

    Hi Rodrigo,

    Nice one - well done on completing this solution!

    Two tips:

    • you could consider using transform: translate x/y to achieve the staggered card affect instead of margin. I think it might be a little simpler from a responsive design perspective
    • also Flexbox has a property called gap, it makes life a lot easier spacing out Flexbox child elements but it's not completely adopted yet

    Keep coding!

    Marked as helpful
    0
  • Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    To get rid of the accessibility issues shown in your Report, wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more

    Great job! :)

    Marked as helpful
    0
  • Rodrigo Nascimento•220
    @rodrigovnPosted almost 3 years ago

    thank you! i will keep that in my notes

    1
  • Rodrigo Nascimento•220
    @rodrigovnPosted almost 3 years ago

    Thank you darryn I will definately keep that in my notes

    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