Submitted 10 months ago

Testimonies page using CSS GRID

Ashok Kumar Dharanikota• 210

@Ashok-Kumar-dharanikota

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

Taking on this challenge really helped me figure out grid layouts better. It was cool, but I had a problem. I couldn't make the text show up on top of the "bg-pattern-quotation" image. I tried using z-index and absolute positioning, but it didn't work like I thought it would.

Also, some testimonials had empty spaces. I guess it's to make them all the same height, but is there a better way to do that?

If anyone tackled this challenge and has some solutions, I'm super excited to see them. It'll help me learn some good tricks.

Thanks a bunch!

Community feedback

DBan3• 70

@DBan3

Posted 10 months ago

Very nicely done! As for empty spaces, you could utilise "line-height" property to space out rows in text so they fill up more vertical space. Or perhaps make the right column a bit skinnier so it doesn't have so much space for text. It will then push the text in a more vertical position.

I'll try this challenge out, look out for it on my profile in a day or so if You're interested.

I am a beginner myself, but if You have more questions feel free to ask.

Ashok Kumar Dharanikota• 210

@Ashok-Kumar-dharanikota

Posted 10 months ago

@DBan3

Sure! I would like to see your work too.🙌

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