Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Testimonials Using HTML, SCSS & CSS GRID

P
Peter Ramirez• 370

@peterramirez18

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback would be nice. Thanks!

Community feedback

Anar• 700

@anar-sol

Posted

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

@peterramirez18

Posted

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

0
Anar• 700

@anar-sol

Posted

@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,140

@pikapikamart

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord