Submitted almost 3 years ago

Responsive Social Proof Landing Page Using HTML, CSS

atanasov36• 580

@AtanasovCode

Preview site View code

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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?

Community feedback

walmanjm• 425

@walmanjm

Posted almost 3 years ago

hi,

if you wanna stick around with your " margin" way ,

you have to calculate the margin-bottom: margin-top: ,

something like this :

in your code, you put review-1 review-2 review-3 inside reviews ,

the margin-bottom: of review-1 is should be margin-top: of review-3 ,

and the margin-bottom: margin-top: of review-2 should be between ,

in code like this :

.review-1 {
  margin-bottom: 2rem;
}
.review-2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.review-3 {
  margin-top: 2rem;
}

we can say this the traditional way to what @alwodzicki suggestion with flexbox

by the way take a look also in mobile its need some correction,

and don't forget about the :

bg-pattern-bottom-desktop.svg

bg-pattern-bottom-mobile.svg

bg-pattern-top-desktop.svg

bg-pattern-top-mobile.svg

happy coding 👍👌

Marked as helpful

atanasov36• 580

@AtanasovCode

Posted almost 3 years ago

@walmanjm Hi Walmanjm!

Thank you for taking the time to help me improve my method of using the margin-top property to style and align the boxes. I ended up implementing @alwodzicki 's solution because as you mentioned too it is a bit better and makes the code easier to understand.

I also took note of the mobile design and I believe I have fixed the issues there so now it looks and functions a lot better. I just had to change some things and I got it to work properly :)

As for the background photos I didn't include them as I don't really seem to notice a difference with them and so I made the choice to leave them out, hope this isn't a very bad thing to do :)

Thank you again I really appreciate it :)

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

atanasov36• 580

@AtanasovCode

Posted almost 3 years ago

@alwodzicki Thank you Ashley this did help me out

I used your suggestion and I managed to get the site to look and function a lot better than what it did before and I also learned a new technique so thank you for that also :)

I did the same technique for the star reviews too and it worked on them too!

Thank you again I really appreciate your feedback :)

Tony Tang• 215

@FMcoding

Posted almost 3 years ago

I would suggest the translate() method: https://www.w3schools.com/css/css3_2dtransforms.asp

Marked as helpful

atanasov36• 580

@AtanasovCode

Posted almost 3 years ago

@ForTestingStuffs Thank you Tony for your feedback, I wasn't aware of this method before but now I have added it to the list of things to learn and experiment with :)

Thank you again!

Please log in to post a comment

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