Social Proof Section using Flexbox, CSS variables and REM units.

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Eric Salvi! 👋

  Happy to see you posting another solution! It responds well. Here's my small suggestions:

  • Change the alt attributes for the .quote__card-author avatars as they don't do any extra context for screen reader users. Changing to alt="" will make screen readers skip those avatar images.
  • You repeat your HTML code with stars images which is unnecessary. Find the way to use only one star image for a .stars. You can do it easily by using background-repeat approach in your css. Your approach isn't wrong tho, you can keep it as it is tho.

  Good luck with that, have fun coding! 💪

  1

  ---

  

  Eric Salvi•1,350

  @ericsalviPosted over 3 years ago

  @tediko Thank you for the suggestions.

  I did set the alt tag to alt="" as you suggested. I actually contemplating doing this previously and thought maybe it might be good for accessibility but I can see it is not really an important image and not the focus of the content.

  As for the stars, I did implement originally using space for background-repeat but I didn't like the way it looked as I wanted specific spacing between each start.

  Definitely worth noting for future designs.

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  it looks good until right below 375px it is like you added in an extra media query you do not need

  1

  ---

  

  Eric Salvi•1,350

  @ericsalviPosted over 3 years ago

  @palgramming Thank you. This was sort of intentional as there are no screens I know of that go that narrow. I could be wrong but you really have to go beyond any screen size to see it at that width.

  0