Social Proof Section Challenge

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks fine but on my end, the testimonial section's content is almost touching the right-side of my screen, I am using 1366x768. Resizing, the site is not responsive at the moment since still, the testimonial section is being hidden by the screen. Mobile layout looks fine but the issue of testimonial-content hidden persist.

  Some suggestions would be:

  • It would be great to have a base styling of this:

  html {
    box-sizing: border-boxl
    font-size: 100%;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit
  }
  

  This way, handling an element specially its size will be easier because of the box-sizing

  • Remove the footer position: fixed since it just stays on the screen especially when using dev tools or when a user have a small height monitor/screen.
  • All those star icons are only decoration on the site. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
  • Another approach for all of those stars would be to use them as a value for the background property. Have a search for that one^^. That way, you avoided creating multiple img tag.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like span to wrap the text.
  • Maybe not adding min-width on each of the testimonial card would be great so that they will resize if needed.
  • Also, you could use this markup for each of the testimonial card so that it will be navigated properly:

  <figure>
    <img src="" alt={person name}>
    <blockquote>
      <p>
        {qoute in here} 
      </p>
    </blockquote>
    <figcaption>
      person name
      <p>
        person role
      </p>
    </figcaption>
  </figure>
  

  Though you would just need to use grid so that you could place each item properly like on the design.

  • Also, each person's image should only use the person's name as the alt. When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one.

  MOBILE

  • Remove the min-width on the main tag and on the customer so that the issue that I mentioned at the beginning will be removed.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Emmanuel Oloke•320

  @EmmanuelOlokePosted about 3 years ago

  @pikamart Thanks a lot for taking the time to give this extremely detailed feedback, I really appreciate it. I'll make sure to implement all you have suggested and transfer the knowledge to subsequent challenges/projects. Thanks once again.

  1