Skip to content
Submitted over 2 years ago

social-proof-section

Barney•370
@waikoo
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

  1. If you answer, please answer the most important question of mine: How did you manage to keep the distance between the purple cards AND have the text break as in the design? Should have I changed the font-size so that everything gets bumped up by a little, so the space between the cards is not that big?

  2. I went for flexbox for this one, but soon enough all those divs were getting really cumbersome. What are your thoughts on flexbox vs grid for this challenge?

  3. Is there a better way to get 5 stars in HTML/CSS if you have one image only, other than using Photoshop or copy-pasting the img tag 5 times as I did?

  4. I solved the rating's staircase style-like flow with using margins. I did the same for the testimonial section, and while margin-top pushed the top away from the container of every testimonial card, the bottom of card 2 and 3 didn't go below the bottom line of card 1. I eventually found my working solution of using transform: translateY(x%); which allowed their bottom to go through. Have you used a different approach?

Community feedback

  • Jake Godsall•1,390
    @jakegodsallPosted over 2 years ago

    Hey  😎

    I'll help answering the fourth question.

    1. One way to solve this problem is by using a vertical flex-box for the parent div and using align-self for each of the individual child elements to stick to the left, the centre and the right. This can be achieved using align-self: flex-start, align-self: center, and align-self: flex-end respectively.

    So it looks something like

    .parent-div {
    display: flex;
    flex-direction: column;
}

.child1 {
    align-self: flex-start;
}

.child2 {
    align-self: center;
}

.child3 {
    align-self: flex-end;
}

    Also, I noticed in your SCSS file a lot of media queries written for different elements. I'm still learning myself but I believe that it would be better to use nesting inside a single media query, at least for code readability.

    Hope this helps!

    Marked as helpful
    1
  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Barney, congratulations for your new solution!

    Answering your question:

    If you're using flexbox or grid you can manage the space between the cards with the property gap, for example, gap: 20px.

    Add this property to make the container to align with the body:

    body {
    min-height: 100vh;
}

    Give it the aligment with flexbox:

    }
@media (min-width: 1440px)
main {
    display: flex;
    max-width: 1440px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    👋 I hope this helps you and happy coding!

    Marked as helpful
    1

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