Back on track after a while, Responsive

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, it is responsive, however you you are using too much screen-size for the mobile layout. Right now, at point 1200px going down, the mobile layout is already being shown, desktop layout could have used more of those screen-size. The mobile layout however looks great as well.

  Some other suggestions would be:

  • Avoid using height: 100vh on a large container especially the body tag, this makes the element's height limited to only remaining screen/viewport's height, try inspecting your layout in dev tools at the bottom, hover on the body tag, you will notice that it doesn't capture the whole content. Instead, use min-height: 100vh this takes full height and will expand if it needs to.
  • For this one, I wouldn't use header I would just use main to wrap the whole content since the contents is just one component or a section.
  • The text after the h1 should be using p tag, use meaningful elements on any content, you could wrap the span inside the p tag or just use p tag on it.
  • Each img of the stars should be using alt="" attribute as well as aria-hidden="true" on it, since it is only decorative image, hide it. Also, always remember to include the alt attribute, don't forget to include it.
  • Again the text for the ratings should be wrapped inside meaningful element like p tag.
  • Each person's image should be using their name as the alt value like alt="Colton Smith", if an person's name and image is present at a page, always use their name as the alt value.
  • Great that you use heading tag on the person's name, but the heading level is wrong. If you use h3 make sure that h1, h2 are present as well, use heading tag with their level incrementally by 1.

  Aside from those, site looks great.

  11

  Marked as helpful