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 (Vanilla CSS, Grid, Custom Hover States)

Lucas 👾 104,420

@correlucas

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


👾Hello, Frontend Mentor coding community. This is my solution for the Social Proof Section.

Someone have any clue why my design stop to wrap when arrives to width 300px? The rating and the customer card containers stop to stretch and I don't know why.

The thing hardest thing was to position the divs with the rating starts, without getting them out of the container because of the left padding that align them a 40px left. I used 80% width into those divs to make them inside the container, but I`m not sure that this was the best solution.

If you've any advice of how can I can improve my CSS/HTML structure, you're welcome!

I did some personal design improvements:

  • 👾 Custom hover states on rating and testimonial section;
  • 👾 Custom breaking points;

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Salve lucas, tudo bom?

Gostei muito do resultado deste projeto, estou surpreso com as suas habilidades de sempre personalizar algo que eu nunca iria ter a ideia que ficaria legal de personalizar hauhauauhua

Tudo está ótimo! Mas como sou crítico, poderias adicionar um media query para deixar as imagens de fundo maioes em resoluções altas.

exemplo:

@media (min-width: 1920px) {
    body {
       background-size: 60%, 60%;
}

o resto está ótimo!

Parabéns!

Marked as helpful

1

Lucas 👾 104,420

@correlucas

Posted

@AdrianoEscarabote Esse é antigão, gastei mto tempo mexendo em tudo. Vou olhar aqui valeu!

0

@SurajHadage

Posted

I would suggest to reduce font-size of <h1> and padding of other elements when screen becomes smaller.

1

Lucas 👾 104,420

@correlucas

Posted

@SurajHadage Hello Suraj, how are you? can you give more details why I should apply these changes? 🤔

0

@SurajHadage

Posted

@correlucas

Your design is perfect. No doubt but on smaller devices like galaxy fold h1 should be smaller.

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