Submitted over 2 years ago

Social Proof Section Challenge

#bem

Chris• 400

@chrisvn188

Preview site View code

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I use the combination of flexbox and grid to build layout for this challenge. I learned to use transform property to make card move left or right, up or down. Simple challenge but learned a lot :). I like the color pallette of this design. Any feedbacks to my code are appreciated! Thank you all!

Community feedback

Grace• 27,950

@grace-snow

Posted over 2 years ago

Hey this looks great, but I am seeing a load of horizontal scroll on mobile. I think it’s caused by the background image pseudo. There’s no need to use pseudos on this though, backgrounds can go on the body just fine

Marked as helpful

Chris• 400

@chrisvn188

Posted over 2 years ago

@grace-snow Thank you for the feedback Grace! When I inspect it I don't see the horizontal scroll. I just try to do it by different ways but I think using background property is better solution for this. Am I right? I don't know for sure.

Chris• 400

@chrisvn188

Posted over 2 years ago

@grace-snow Oh you right, there is a horizontal scroll because of the pseudos element. Thank you again for the feedback!

Remus D. Buhaianu• 3,145

@Miculino

Posted over 2 years ago

Hey @chrisvn188, congrats on completing this challenge!

Your solution came out looking really good and the responsive design works as expected!

Just a few suggestions based on your final solution:

The background images that you can see in the original design are missing from your final solution. There are multiple ways to tackle this task. You can use background-image property on the body element or add two divs and use absolute positioning on them or use the ::after and ::before pseudo-classes
On mobile resolution, add just a bit more horizontal padding on your body

Overall, great job!

Marked as helpful

Chris• 400

@chrisvn188

Posted over 2 years ago

@Remus432 Thank you so much for your feedbacks. I forgot to style the background again :) . I'll fix it now.

Chris• 400

@chrisvn188

Posted over 2 years ago

@Remus432 Hi Remus, thank you again for your suggestions. I updated code successfully. I learned new solution to add background images using ::before and ::after pseudo elements. Really appreciated! Happy coding!

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