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

Stats preview card component

@LucianoOliveira1

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


EN: This is my solution for the Stats preview card component. Feel free to leave any feedback about the solution or the code! Thank you very much in advance!

PT: Esta é a minha solução para o desafio Stats preview card component. Sinta-se à vontade para deixar qualquer feedback sobre a solução ou sobre o código! Desde já, muito obrigado!

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Fala Luciano, beleza?

Parabéns pela solução, ficou muito boa mesmo!

Tem só um problema com o tamanho da imagem quando ela vai escalando e muda pra mobile com a media query, a imagem não está pegando 100% da largura, duas coisas você pode fazer pra melhorar isso, evitar usar height porque se você definir a altura pro container, a altura fica fixa e os elementos não vao crescer ou diminuir junto com o container.

Pra deixar a imagem mais responsiva use sempre max-width: 100%; e display: block

Espero ter ajudado e continue no foco!

Marked as helpful

1
Sayan 130

@logansayan

Posted

Hey LUCIANO, I took a look at your solution for Stats preview card component and I think it looks great but there's a slight problem with it... It works amazing with phone and desktop screens but breaks when it comes to tablet sizes...

So, I think the solution would be to trigger the media queries before it starts breaking...

Overall a good job for layout and stuff...

Marked as helpful

1

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