Social Proof Challenge 1st attempt

Community feedback

• 

  yas-avocad•380

  @yas-avocadPosted 7 months ago

  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

  0