Design comparison
Solution retrospective
Hey coders,
- How to align the testimonial cards as per the design? (I tried the margin-top option but it will only shrink my card)
- While testing the responsiveness of the page I noticed that around 400px the rating sections do not wrap while other contents shrink. What might be the reason?
Thanks for reviewing my work.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AdamMintaj
Hi there, congrats on completing the challenge!
Regarding your first question: if I remember correctly, when I was doing this challenge I positioned the cards by setting the first and the third cards' position to relative and then adding some pixels to top and bottom respectively. As to your second question, I think it's the margins on "ratings-1,2,3" elements that cause the trouble when the window width goes below 400px. Once I set them to auto, the problem seems to be gone.
On a side note: I highly reccomend learning and adapting a css naming convention, it can really help a lot when your projects get bigger. It also helps you write cleaner and more systematised code that's easier to review. Personally, I decided to apply BEM (block - element - modifier) to my css and I must say that I'm much more satisfied with my css since!
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