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

Responsive landing page using lex end media query

@victorspoot

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas 👾 104,440

@correlucas

Posted

👾Oi Victor H P Sá, tudo bem? Parabéns pela sua nova solução!

Acabei de ver o preview da sua solução e tenho algumas dicas pra você:

1.Eu vi que você usou id para estilizar o componente, não é uma boa ideia porque id é um seletor muito específico usado para forms e chamar blocos com Javascript. Em vez disso, use class para estilizar e deixe o id para coisas muito específicas.Não é aconselhável usar IDs como seletores de CSS porque se outro elemento na página usar o mesmo estilo/semelhante, você terá que escrever o mesmo CSS novamente. Mesmo que você não tenha mais de um elemento com esse estilo agora, ele pode vir mais tarde.

2.Uma boa prática seria usar unidades relativas como rem ou em em vez de px para melhorar seu desempenho redimensionando fontes entre diferentes telas e dispositivos. Pra fazer um site mais acessível, o ideal seria usar rem em vez de px. O REM não se aplica apenas ao tamanho da fonte, mas também a todos os tamanhos.

3.Pra o seu container ficar responsivo a unica coisa que falta é substituir width com max-width note que a diferença entre essas duas propriedades é que width é uma propriedade fixa e max-width faz o container ter uma largura máxima mas também pode diminuir. Então, caso você queira que um elemento seja responsivo não use width.

👋 Espero que essas dicas te ajudem e que você continue no foco!

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