Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social proof section

@reya3183

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, this is my 4th challenge. Wow! I love this challenge so much cause I learn a lot of things about the grid. Moreover, if you have further suggestions, feel free to tell me. I have a little confusion about the background images like it does not work perfectly! if you have any idea, please share with me. Happy coding! Thank you :)

Community feedback

Karim 590

@yasssuz

Posted

Hey, very good website, but I would change some things.

Inside the card you used grid, but this is causing the info to overlap the profile picture. You could solve this using flexbox, take a look at my example!

Then, the last element inside the <div class="rate-wrapper"></div> is expanding himself all the way long on bigger screens, that's because the child is trying to reach the end of the grid element. You could solve this by putting max-width: 427px; on the <div class="rate-wrapper"></div> element.

take a look at my example :)

happy coding :)

1

@reya3183

Posted

@Galielo-App wow!Thanks a lot for your valuable comments. I think I fixed the overlapping problem, I again check this now and everything is ok! if it shows overlapping on your screen, can you give me screenshots on slack?

1
Karim 590

@yasssuz

Posted

@reya-naher it's ok now :)

1

@AgataLiberska

Posted

Hi @reya-naher, on smaller mobiles the right edge of all content is disappearing under the marging, it looks cut off. I'll send you screenshots on Slack

1

@winal-28

Posted

how about add more padding on the top :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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