Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social proof section

@sarvothamgowda

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey coders,

  1. How to align the testimonial cards as per the design? (I tried the margin-top option but it will only shrink my card)
  2. 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

Adam 210

@AdamMintaj

Posted

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

@sarvothamgowda

Posted

@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
Discord logo

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