Mobile-first and responsive social proof section with html and css

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted over 3 years ago

  Hello

  Well done on this,it looks pretty good ☺

  Try to get the alignment right on the left and right of the page on desktop. And use min-height 100vh on your section (which should be a main element, not section) to fix vertical centering of the component on the page.

  In the html you need to

  • remove all alt values on those stars. Those are purely decorative images as the writing already says "5 stars" so should not be announced by assistive tech
  • as apple voiceover will still announce svg images even if they have an empty alt attribute, its probably best to also add aria-hidden="true" to those stars as well
  • remove all the strong tags. Change font weight with css instead. String means emphasis and should only be used intentionally for that purpose (eg emphasising words in a paragraph)
  • in the testimonials you have text in a div alone. It always needs to be in a meaningful element, like a paragraph or blockquote. In this case I would probably have each testimonial as a figure element, with the person's name as fig caption. It needs something like that, even a heading from the person's name and paragraph for the quote would do - just something to give semantic structure to the content

  In css make sure font sizes are never in px. Use rem (or sometimes em) instead. That's really important

  Good luck

  Marked as helpful

  1