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 testimonial section using flexbox and grid

Michael• 100

@mikeyxx

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

Testimonials grid section
  • HTML
  • CSS
2junior
View challenge

Design comparison

SolutionDesign

Solution retrospective

This project was a very interesting one for me because I'm trying to improve my layout. I challenged myself to work with grid and flexbox in the same project. I used flexbox for the mobile design and and grid for desktop. I think I got the mobile design perfectly using flexbox. The grid on the desktop design was a little tricky (Still a little bit new to grid). I found it a bit hard placing each of the items where I wanted them until I figured out how to do them using grid area which was pretty cool. The only issue I had is that the last item on the right is overlapping a bit and I'm not sure how to fix it. The other issue I had is with reducing the space between the reviewer's name and 'verified graduate'. I think this was probably because I used figcaption for the name and span for the 'verified graduate'. I'm not yet sure how to figure that out. I'd like your suggestions on how to improve on these flaws please.:)

Community feedback

Raymart Pamplona• 16,120

@pikapikamart

Posted

Hey, great work on this one and also thanks for letting me know to review this one^^. Layout is great in desktop as well for the mobile state. A suggestions though for the responsive state is to maybe add a 2x2 layout before transitioning to mobile state. Currently, at 744px which still shows the desktop state, you could see that the layout is squished, that is having a 2x2 would be really great.

Actually, seeing it the layout for Kira is not really overlapping the content, have you already fixed it?

Just some suggestions for the site would be:

  • Having a :hover effect on an un-interactive element is not really great because you only want to animate an element if it is bound to be interacted with. But if you insist on this one, it would be better if the animation is just subtle.
  • There should always be an h1 on a page. 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 this challenge, inspect the layout and see the usage of h1 as well the stylings applied to it.
  • When using heading tag, make sure you aren't skipping a level. If you use h3 make sure that h1, h2 are present "before" it.
  • The person's position is not really suited to be a heading tag, use p tag on it. Just the name of the person is the one that should be a heading tag, because they are the highlight of the section and it is already known that the section would contain the person's testimonial since this is a testimonial section.
  • The testimonial bold text is not really a heading tag, if you read it, it is just part of the text-below. The text doesn't really convey anything that the section would contain.

Aside from those, the site looks great. Haven't seen what you mentioned by overlapping.

Marked as helpful

1
Michael• 100

@mikeyxx

Posted

@pikamart Thank you for these pointers. I will make all of the changes you suggested. Here is a screenshot of the overlap I told you about: https://github.com/mikeyxx/testimonials-grid-section/blob/master/README.md

The overlap on the Kira grid is adding and extra space to the row gap. Please check it out.

1
Raymart Pamplona• 16,120

@pikapikamart

Posted

@mikeyxx Hey, so I found out about it.

The margin-block-end: 1.3rem; on the .testimonial selector is causing that bug, try removing it and the desktop layout will be fixed. But doing that, going into mobile there are no spacing, so on mobile add a gap property on the .container. ^^

Marked as helpful

1
Michael• 100

@mikeyxx

Posted

@pikamart You are amazing, I love your feedbacks. I have implemented all the pointers you raised and now my solution looks really good. Also thank you for pointing me to Grace's solution, looking through her code was helpful. I will now be moving on to challenges that include JS (I'm terrified lol) as I'm still trying to perfect my use of DOM. I hope I can still reach out.

Thank you :)

1
Michael• 100

@mikeyxx

Posted

@pikamart Hello Raymart Pamplona, please help review my project. Only issue I have is adjusting the grid for Kira whittle, its overlapping the others. I have tried severally to fix the issue but I haven't been able to. I'd really like your feedback

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