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 grid w/ grid & flex

@ComanderPotato

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

0

HTML Issues

View Report

Tom Golding’s questions for the community

Let me know how it looks

Community Feedback

P
Lucas 👾 13,930

@correlucas

Posted

👾Hello Tom, congratulations for your solution!

I saw the work you did building the layout with grid and seems great, you've paid attention to the details. I liked a lots.

I've one tip for you about semantics and other about the design:

1.Maybe the best tag element to wrap these quotes is <blockquote> because describes exactly what is inside of it, so you can replace the <p> with the <blockquote> for a better semantic marking.

2.Note that the quote icon is a little bit too big and in the mobile version after width: 300px; it starts to cover the section with the profile info, to solve that you should decrease one z-index level to get it under everything.

Anyway, congrats for this amazing solution!

Hope it helps and happy coding!

Marked as helpful

0


@ComanderPotato

Posted

@correlucas Thanks I've only touched on the block level HTML and haven't been able to look at inline semantic elements so that is my next step, and I looked at it so many times couldn't tell whether it changed size responsively hahah but thank you slowly working on everything!!

1

Please focus on giving high-quality, helpful feedback and answering any questions ComanderPotato might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!