Skip to content
Submitted over 2 years ago

Social Proof Section (Vanilla CSS, Grid, Custom Hover States)

Lucas 👾•104,340
@correlucas
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

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•38,330
    @AdrianoEscarabotePosted about 2 years ago

    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,340
    @correlucasPosted about 2 years ago

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

    0
  • Suraj Raju Hadage•670
    @SurajHadagePosted over 2 years ago

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

    1
    Lucas 👾•104,340
    @correlucasPosted over 2 years ago

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

    0
    Suraj Raju Hadage•670
    @SurajHadagePosted over 2 years ago

    @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

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