Responsive Social Proof Section with HTML and CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks fine but the bottom-text size needs to be bigger and the line-height to be adjusted, the box as well could be resized to be larger. It is responsive and the mobile state needs to be adjusted since there is an horizontal scrollbar since elements are being hidden.

  Some suggestions would be:

  • First, it would be great to have a base styling with these:

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

  Using this makes an element easier to handle with especially with using padding and margin you could search up more about box-sizing: border-box.

  • Always have a main element to wrap the main content of your page. On this one, the main would be wrapping all the 3 div that are direct child of the body tag.
  • Avoid using id attribute as a selector in css because it is a bad practice due to css specificity. Use class to target elements.
  • Each svg for the start should have use an aria-hidden="true" attribute on it. Decorative svg should be hidden by this method. Also you could have use those images as a value for background property, this way you won't be needing to add extra html elements.
  • The rated something text is not really a heading tag, since it doesn't really add any extra information on what the section would/could have.
  • When using heading tag, make sure you aren't skipping a level. If you use h4 make sure that h1, h2, h3 are present "before" it.
  • Person's img should be using the person's name as the alt like alt="Colton Smith.
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "image" and others. An img is already an image/graphic so no need to describe it as one.
  • Person's name should be a heading tag, since they are the focal point of each testimonial card.
  • When wrapping a text-content do not just use span to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
  • Lastly, just what I mentioned earlier about font-size and line-height adjustment.

  Aside from those, great work again on this one.

  0

  ---

  

  Pankaj Shalikram Pawar•120

  @DamnItAzrielPosted about 3 years ago

  @pikamart Oh thanks for this detailed feedback. Looking to make all the tweaks you mentioned.

  1