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

frontMentor5

@hotchkiss88

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Ken 935

@kenreibman

Posted

Great job! Just a few suggestions:

Always have a <main> element wrapping your entire content. On your project you would have the main element instead of div for .container

<main class="container"> </main>

When you use the section element, it should always follow with child heading tags (h2-h6). Changing those sections to divs will also solve some errors that are being flagged.

The layout for 1440px and 375px looks great but everything in between looks like your page is spilling out to the top and being hidden. I know the challenge is to make it for those two screen sizes. However, It's good practice to make it responsive for all screen sizes! I'm sure adding a quick media query for the other sizes and applying padding-top or margin-top will be a quick fix to that problem!

Don't forget to generate a new report!

Marked as helpful

0

@hotchkiss88

Posted

Hello Ken. Thank you for feedback. It's very helpful. My projects were speed-run. Five in five days. I also watched your work. It looks really professional. You can see that you put a lot of work into the final effect. Good luck.

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