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 Master

@wilbros

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


Completely re-wrote CSS. Although I'm having trouble with centering my container.

Community feedback

Loai Esam 670

@LoaiEsam37

Posted

You're a true expert at coding and Your skills are truly impressive and you can make it more incredible if you use this html structure to wrap the elements and center the container

<body>
<main>
<div class="container">
<div class="wrapper">
<div class="description">
...
</div>

<div class="ratings">
...
</div>
  
<div class="reviews_container">
...
</div>
</div>
</div>
</main>
</body>

give the <div class="container"> tag max-width: 1200px; and padding: 0 15px; and remove the padding and display grid from the main tag and give it these properties :-

main {
display: flex;
justify-content: center;
align-items: center;
}

and you can use the <div class="wrapper"> for making some padding. there are some more changes but i don`t have time to say it all 😅 also you can checkout my solution for this chalange if you want to see my source code

hope you found this helpful !!! 😊

Marked as helpful

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