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

Lacey E 110

@laceeder

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


I have some white space behind the ratings/heading area. Not sure how to remove that? Feedback is welcome. This was a tough one, I'm still getting used to Grid, but had to end up resorting to Flexbox. Will have to continue practicing with Grid.

Community feedback

mycrochip 460

@mycrochip

Posted

Hello Lacey,

Trust you're good. Congratulations on completing this project. You've put forward a wonderful solution to the project challenge.

I have a few feedbacks to help you slightly improve your website's presentation.

The first and most significant to me, and I believe, to most programmers as well, is that I do not style the 'html' at all. This is because there are bound to be layout issues introduced unknowingly by its child elements (like the body element).

Remove the margin property on the body element and replace that with padding. They are both white spaces, but their application is different.

With regards to your concern about the white space around the ratings, this issue was introduced indirectly by the element with content-wrapper class. There should not be a background color on this wrapper.

Remove the background-color property of the .content-wrapper selector.

This could be an attempt to prevent the background images from showing through.

FIX: You could set the background images of the body properly according to the design by giving them a background size property.

Marked as helpful

0

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