All comments

• 

  atanasov36• 580

  @AtanasovCode

  Submitted almost 3 years ago

  Enjoyed doing this one!

  The only thing that I couldn't seem to figure out is how to lower down the review boxes to achieve the effect of one being lower than the other. This is how I did it:

  • I used the margin-top to make the review box shorter than the one next to it.
  • Than I used the padding-bottom - to give it more padding at the bottom so that it canbe the same size as the othrer box.

  I think this worked well with the 3rd box but the second box would gain the same amount of padding no matter the value that I input. Why was that and is there a better way to achieve this?

  

  Responsive Social Proof Landing Page Using HTML, CSS

  3

  1

  0

  

  Ashley• 75

  @alwodzicki

  Posted almost 3 years ago

  I would suggest using flex-direction: row on your .reviews class to align the review boxes in a row. Then adjust the position of each review block using align-self.

  Apply the code to your container for the reviews:

  height: 350px;
  display: flex;
  flex-direction: row;
  

  You may need to adjust the height of the container to create the correct spacing.

  Then individually select each review and align it using the align self:

  First review box align-self: flex-start;

  Second review box align-self: center;

  Third review box align-self: flex-end;

  I hope this helps!

  Marked as helpful

  1

  This comment has received 1 replyShow