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 Challenge Updated

@nikharg

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


Updated with the given Suggestions...Any Suggestions or Feedbacks?

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @nikharg 👋🏻

I have some suggestions for the desktop layout, the accessibility issues, and some minor things.

  • For .top remove padding-left completely, because it's causing some problems on the layout, by pushing the text too far left.
  • For .card-rating reduce padding-right to 80px, so it aligns with the comment boxes. -<div class="attribution">...</div> should be <footer class="attribution">...</footer>.
  • <h4> of the names should either be <h2> or <p>, because headings in HTML have to decrease gradually. These will fix the accessibility issues, just, don't forget to generate a new repot once you fix the issues.
  • Next, the star icons should have aria-hidden="true”, like so <img src="./images/icon-star.svg" alt="" aria-hidden="true”>, because they're for decoration. You can read more about aria-hidden here.
  • One last thing, for the mobile viewport width, remove overflow: hidden; so it can be scrolled.

I hope this was helpful 👨🏻‍💻 you did a great job with responsiveness, keep it up. Cheers 👾

Marked as helpful

0

@nikharg

Posted

@kens-visuals Thank you so much sir for your suggestions! It really helped me a lot. Thanks for supporting me again!!🙏

0
P
Ken 4,915

@kens-visuals

Posted

@nikharg no problem, I'm glad I could be helpful 😇

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