Skip to content
Submitted about 1 year ago

Social Proof Challenge 1st attempt

Kari5745•150
@Kari5745
A solution to the Social proof section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I did this completely by myself. Some time ago, this would've been totally impossible for me.

What challenges did you encounter, and how did you overcome them?

The most difficult part was moving the comment boxes and rating boxes so that they are not totally aligned.

For the comment boxes I followed KimDoesCode and used margin top 2 rem and 3 and it worked, but for the rating boxes it didn't.

Somehow the rating boxes were aligned to the center and didn't move so I used margin-left: 0 for the first box; and margin-right: 0 for the third box.

What specific areas of your project would you like help with?

I still have troubles aligning objects.

Code

Please log in to post a comment

Log in

Community feedback

  • yas-avocad•360
    @yas-avocad

    Hey!

    For the boxes, I ended up using a container that nested all three ratings elements and another container that nested all three purple testimonial elements.

    So for the ratings, I had a container called rating-container. Then the three rating elements were all labeled the same as ratings.

    I set a width for my main container (rating-container) of 540px and used flex, align-items:center, justify content: center.

    Then, to align each individual item, I used the nth-child() element and the align-self element. The nth-child() element individually targets each of the 3 separate ratings boxes. Align-self overrides the flex directions from the main container.

    So, in the end it looks like this:

      .ratings:nth-child(1) {
    align-self: flex-start;
  }

  .ratings:nth-child(2) {
    align-self: center;
  }
  
  .ratings:nth-child(3) {
    align-self: flex-end;
  }

    And I used the same technique for the purple testimonial boxes too.

    Marked as helpful

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