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 testemonials page with Grid

adrnmatos 150

@adrnmatos

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


Could not insert quote symbol. Can somebody help? Thanks.

Community feedback

@alessandro-chrystian

Posted

Try to add the quote symbol with "background: url(./...)" on CSS selecting the container you need to put it. In the same property, you can adjust where the symbol will be positioned by using "px" on it.

Marked as helpful

0

adrnmatos 150

@adrnmatos

Posted

@alessandro-chrystian Hi. It works. I adjusted with percentage values. Thank you.

1

@alessandro-chrystian

Posted

@adrnmatos You're welcome! By the way your solution looks really good!

1
Bryan Li 3,550

@Zy8712

Posted

Your website looks pretty good. Not too sure what you mea by "couldn't insert quote symbol". Hope you could clarify on that. Some things I noticed when testing your site is that:

  • your site goes to mobile layout way too quickly. When changing my browser size it automatically when to mobile layout. So you might need to adjust your media query values slightly
  • you are missing a <main> tag around your content. This is mainly for accessibility purposes and should warp around the main contents of your page

Aside from that, your page layout looks pretty good. Nice job 👍

Marked as helpful

0

adrnmatos 150

@adrnmatos

Posted

@Zy8712 Hi. You are right. I had set only one transition at desktop recommended size but I think there should be an intermediate layout transition also. In this case, I would need to arrange items in another layout. For now, I set mobile max-width property to 500px in order to prevent it to extend too much at horizontal direction.

The quote symbol I meant is an SVG file to be inserted on the violet container. I think it is solved now.

I follow your suggestion to inclose all content in a main tag. No so sure how it is used. I thought it was only needed when there is aside tag altogether.

Thank you for your comment and suggestions.

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