Social proof section

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. The desktop layout looks great, thought it is missing the 2 background-blobs and each of the review container doesn't have the greyish background as well. The site responds to screen-size changes but if you go to at point 510px above, the contents are now squished because the mobile breakpoint is too late, adjusting that would be really nice. The mobile state however looks great.

  For some other suggestions, here are some:

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

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

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

  • Removing the max-height from the main would be really nice. Normally, you don't want to cap a large element's height because if the screen shrinks , the content will be scaled as well right, but if the container's height is limited, then the content after the capped container will now not respect the dimension of the element, making the capped container's content to be overflowing it.
  • For those star-icons, you can use the image as a value for the background property. The background could take multiple images and this way, you wouldn't have to create extra img tags. But if you insist on using img tag, adding an aria-hidden="true" on each of the img tag would be nice so that the images wont' be picked up by screen-reader.
  • For the testimonial section, you can use this markup so that it will be easier for screen-reader users to navigate through it using blockquote:

  <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 need to use display: grid on this one so that you could place each item properly like in the design.

  • Each person's img could have used their name as the alt since it is already present and it makes sense to add it because it is all about them in a testimonial.
  • Lastly, just fixing the issue about the responsiveness of the site, the background-blob and the background-color of the review container.

  Aside from those, great job again on this one.

  Marked as helpful

  1