Responsive and mobile first Social-proof-section

Community feedback

• 

  Ken•4,915

  @kens-visuals

  Posted almost 4 years ago

  Hey @nayanabhatm 👋🏻

  I have some suggestion to help you fix the accessibility issues and some other things.

  • First, In your markup, <div class="top-container">...</div> should be <main class="top-container">...</main>.
  • Second, in HTML headings have to increase gradually, so instead of using <h3>Rated 5 Stars in Reviews</h3>, it should be either <h2> or <p> tag. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • Next, the heading and paragraph have to be a bit different. So I suggest the following:

  header h1 {
      text-align: left;
      font-size: 20px;
  }
  
  header p {
      font-size: 15px;
  }
  

  • What comes to the reviews section, the star icons are provided by Frontend Mentor, in images folder. However, you can choose to use yours if you think it fits better. It's your project at the end of the day 🙃
  • No matter if you use <img> tag or <p> stars of there for decoration, so they should have aria-hidden=""true, like this, <p class="fa fa-star checked" aria-hidden=""true></p>. You can read more about aria-hidden here.
  • User images on mobile viewport with are huge and a bit too big on desktop, so I suggest reducing the size, but I'll leave it to you this time 😉

  I hope this was helpful 👨🏻‍💻 overall, nicely done, just need to fix some cosmetic stuff here and there. Cheers 👾

  21

  Marked as helpful