Responsive Social Proof Section using Flexbox & SASS/SCSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. The desktop layout looks fine, though it needed that two background-blobs and the background-color for each of the review so that there will be contrast. The site is responsive thought I still find it large to use 0px-1050px just for mobile breakpoint since desktop layout could use more of those screen-time.

  Here are some suggestions for the site:

  • Adding a max-width on the body would be really nice. If you zoom out on your screen, you will see that the layout just stretches along the screen since there no max-width that will limit the site. Adding that would be nice.
  • Adding the background-color on the container for each of the review.
  • For those stars in the review, you could use the background property to set multiple star-icons since background can accept multiple images. This way, you won't have to create extra img tags on the markup. But if you insist on using img tag, then add an extra aria-hidden="true" on each of the star-icons so that they will be skipped by screen-reader.
  • You can change the section tag that wraps the testimonial part into just div since section is not informative as landmark unless it is labelled using aria-labelledy or it can be used if there is already a visible heading text on the layout.
  • For each of the testimonial card, you can use this markup below so that it will be easier for screen-reader users to traverse 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>
  

  You will just need to use display: grid on the figure so that you could place each item properly like on the design.

  Aside from those, great job again on this one.

  Marked as helpful

  2
• 

  P

  Briuwu•750

  @BriuwuPosted almost 3 years ago

  I see! Thank you so much for the feedback! I will try doing these suggestions! Thank you!

  19