Not Found
Not Found
Request path contains unescaped characters
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
Your session has expired please log in again.

Submitted

Social Proof section Master

Yous 170

@yousra10

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 everyone !!

It's my first time using @media queries for responsive. I use Flexbox to improve this skill. If you have any suggestions, it would be a pleasure to know it !! thank you in advance !

Happy coding !

Best regards ! Yous Ben

Community feedback

@Tuason066

Posted

Hi, I have a suggestion for your styling.

I noticed that your elements have the same style and you write it repeatedly. If your elements have the same styles you can write like this:

.irene-roberts,
.anne-wallace {
styles...
}

so you don't need to repeat the styles over and over.

and if they have only different margins you can write like this:

.irene-roberts,
.anne-wallace {
same styles...
}

.irene-roberts {
margin-top: 1rem;
}

.anne-wallace {
margin-top: 2rem;
}

I also noticed that you wrote your margins like this:

margin-bottom: 0;
margin-left: 1rem;
margin-top: 1.2rem;

there is a shorthand property for that you can write it like this:

margin: 1.rem 0 0 1rem;

check out this link for more information: https://www.w3schools.com/css/css_margin.asp

By the way, the output is very significant. Happy coding !

Marked as helpful

0
Yous 170

@yousra10

Posted

Hi Jeffrey!

Thank you very much for your suggestions!! It's really help me and I will apply it. Thank you so much !!

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