Design comparison
Solution retrospective
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
- @keltiekPosted 7 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 helpful1
Please log in to post a comment
Log in with GitHub
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