@keltiek
Posted
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
