Submitted 4 months ago

Testimonial Grid Pattern

Maan Al-Hababi• 190

@MaanAlHababi

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of knowing I had an idea of how I could reorder the grid's items i.e. positioning the 5th testimonial card to the far right and have it take up 2 rows. However, part of me feels like my method is very hard-coded. I would appreciate feedback on this point.

What specific areas of your project would you like help with?

The z-index of the quotation mark image doesn't work as I intended it to. No matter what I tried, the quotation image always seems to appear in front of the rest of the testimonial card's content.

Community feedback

nekefer• 200

@nekefer

Posted 3 months ago

you need to center your grid content, for that just use the following style on the body :

display: flex;
justify-content: center;
align-items: center;

Marked as helpful

nekefer• 200

@nekefer

Posted 3 months ago

For the quotation mark image the best thing to do is to use background image then you will not have z-index problem anymore: what I did is :

background-image: url("./images/bg-pattern-quotation.svg");
background-repeat: no-repeat;
background-position: top right 50px;

Please log in to post a comment

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