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.
Community feedback
- @AdamMintajPosted over 2 years ago
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!
0@sarvothamgowdaPosted over 2 years ago@AdamMintaj thanks for the feedback. Currently, the margin is set to zero. Will try setting the auto value.
0
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