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-master imitation using css flexbox

#sass/scss

@mohit1607

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


Hi awesome community I tried to imitate the whole design but the only problem I am facing is istead of making a single class for card I made 3 classes which is I know is not scalable . Can anybody suggest what should I do to reduce css code and also suggest some css library so that workflow gets faster. I will appreciate your help

Community feedback

arey 350

@arey-dev

Posted

Hello, congratulations on completing this challenge!!

Regarding with your problem. Remove the .card2 and .card3 , just have 1 class named .card and then try to use the pseudo-class :nth-of-type()

div.card:nth-of-type(1) {
  margin-top: 1rem;
} 

:nth-of-type() pseudo-class targets the siblings of the same type based on its positioning. Which is in your case, the div with the class .card.

Read this for more info :nth-of-type() and If you wouldn't mind, try to look at my solution. Maybe it will help you.

Marked as helpful

1

@mohit1607

Posted

@arey-dev Thank you very much for help, This is the thing that I couldnt figure out for long time but now with the help of you it is. Thanks again and would love to hear from you in future again.

1
arey 350

@arey-dev

Posted

@mohit1607 Glad to have been a help. Happy Coding 😊

Marked as helpful

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