Responsive Testimonials Using HTML, SCSS & CSS GRID

Community feedback

• 

  Anar•700

  @anar-solPosted about 3 years ago

  Hello, you've done a good job =)

  I have some suggestions:

  • On a viewport of 1023px, just before it switches to a multicolumns grid, the elements are too wide which make lines of text really too long.
  • From 1024px and above, there isn't enough space for the four columns, so some elements are too narrow.

  You can create an intermediate layout with only two columns or set a max-width on the container to restrict the element from becoming too wide.

  Marked as helpful

  0

  ---

  

  P

  Peter Ramirez•370

  @peterramirez18Posted about 3 years ago

  Hello @anar-sol. Thank you for your comment, i created intermediate layout with only two columns!

  0

  

  Anar•700

  @anar-solPosted about 3 years ago

  @peterramirez18 It's much better now =)

  You can also set a max-width on the container, in this intermediate viewport, to prevent the text lines (in the last testimonial) to become too long.

  It's the technique I used in my solution to this challenge.

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, it is responsive and the mobile state looks great as well.

  Anar already said great feedbacks on this one, just going to add some suggestions:

  • Always have a main element to wrap the main content of your page. On this one, the .testimonials should be using the main instead of div.
  • Person's img should be using the person's name as the alt like alt="Daniel Clifford". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
  • Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element.Have a look at Grace's solution on this challenge inspect that layout and see the usage of h1 as well the stylings applied to it.
  • The text below the person's name shouldn't be a heading tag, the only heading tag to be used in here is the person's name since they are the focal-point of each testimonial.
  • Each testimonial's bold text, those are not heading tag since they just looks like an opening to the testimonial part for each person, p tag would be nice to use.

  Aside from those, great job again on this one.

  0