Submitted 8 months ago

Testimonials grid section

ELMudyr•240

@ELMudyr

Preview site View code

This is a solution for...Testimonials grid section

HTML
CSS

2junior

Design comparison

SolutionDesign

Solution retrospective

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

I was able to get an approximate sizing of the cards resolution. I would in the future reduce the ammount of styling code and build starting from small media screens to have a better responivity.

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

I would like to know why my grid elements do not stack on smaller screens knowing that I have specified the collumns to 1 col on below medium screens. Also I was unable to set the quotation image to absolute using tailwind, I declaired the parent container as relative, I had to move the image using CSS.

Community feedback

keltiek•210
@keltiekPosted 8 months ago
Hello,

I don't see in your code the default with grid-cols-1.

You could have for example something like: class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4"

Then on each card you have to be careful to set the correct spanning and row/col start depending on the media queries. For Kira, I have something like: class="md:col-start-2 md:row-span-2 md:row-start-2 lg:col-start-4 lg:row-start-1"

For the quotation image I did something like: bg-[url('./images/bg-pattern-quotation.svg')] bg-top bg-no-repeat [background-position-x:82%]

There is a bg-top-right available but then there is no space on the right of the card. I used a custom property to set "background-position-x".

I hope this is helpful, as I'm not very experienced in CSS / Tailwind.

Good luck! :)
Marked as helpful
1

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