Social proof section solution using mobile first

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi There!

  I have some feedback on this solution:

  • Accessibility
    • 👍 Good job for handling all the images. All the stars are decorative images.
    • Since the star images are decorative images, I would recommend using div to wrap all the five stars instead of using ul and li.
    • I would recommend writing the full name for the alternative text for each photo.
    • Use rem unit for the body font size instead of px. Using px will not allow the users to control the font size of the page based on their needs.
    • There are these invalid HTML:

  Check all the headings inside all divs that has "stars" class
  <h2>Rated 5 Stars in Reviews</h3>
  

  • Also, the Rated 5 stars... text should not be a heading. They should be paragraphs.
  • To help you decide a better HTML element, every time you want to write the HTML markup for any project, I would recommend thinking of it as writing a document. It will help you decide which text should be a title (heading), or a paragraph, etc.
  • I would recommend swapping the p element on the quoted text with blockquote for better semantic HTML.
  • Non Accessibility
    • I would recommend creating a div.container to limit the width of all elements or add max-width to each individual element. If you see this web page on 650px - 1279px, all the boxes are becoming too wide.

  .container {
    max-width: 31.25rem;
  }
  

  That's it! Hopefully, this is helpful!

  0
• 

  Eles•1,300

  @eleswastakenPosted about 3 years ago

  Use different paddings for different screen sizes; you could use some media queries for tracking sizes. On your solution, 4k-screen or mobile paddings are the same. You could imagine it as a block of a big landing page, so when the screen is large, you'd obviously want it to be in the middle and not stretched out. Anyway, Good luck!

  0