Skip to content
OverviewSolutions
3
Comments
1
Ashley
@alwodzicki

All comments

  • atanasov36•640
    @AtanasovCodeSubmitted over 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
    Ashley•75
    @alwodzickiPosted over 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