Skip to content
Submitted about 3 years ago

Social Proof Section

Lacey E•110
@laceeder
A solution to the Social proof section challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • mycrochip•460
    @mycrochip

    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

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