Design comparison
Solution retrospective
- Acho que o processo de criar foi divertido, foi bem tranquilo :) 🇧🇷
- Ajustaria o tamanho do documento AHAHAH' (Não tive muito tempo para fazer do tamanho exato) 🇧🇷
Não tive nenhuma dificuldade significativa no desafio, foi bem tranquilo de fazer. Só tive um probleminha com a "ol" que não quis posicionar de maneira alguma a onde eu queria, então, depois de inúmeras tentativas, percebi que tava perdendo muito tempo e a deixei de lado. Mas arrumarei, futuramente. 🇧🇷
What specific areas of your project would you like help with?Aceito com prazer dicas de alinhamento total e responsividade. Ambos ainda são um belo desafio para mim. 🇧🇷
Community feedback
- @danielmrz-devPosted 7 months ago
Fala @robertdouglasaimon!
Seu projeto ficou ótimo!
Notei que você utilizou
margin
pra centralizar o card. Usar margens não é a melhor opção pra centralizar elementos.📌 Existe uma forma melhor e mais eficiente de posicionar elementos no meio da página (tanto na horizontal quanto na vertical):
- Aplique isso ao body (Pra funcionar corretamente, não use position ou margins):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Neste caso, especificamente, por conta do tamanho do card, você talvez ainda precise utilizar margens no eixo vertical, pois essa técnica centraliza o elemento baseando-se na altura da tela, e como o card é maior que a tela, ele iria ficar encostado no topo e no rodapé da página. Mas na maior parte dos casos, esse código acima funciona muito bem.
Espero que ajude!
Fora isso, você fez um excelente trabalho!
Marked as helpful1 - @sivaprasath2004Posted 7 months ago
Hello, I would like to extend my congratulations on completing this challenge. Additionally, I have a suggestion that I believe could enhance your skills.
main{ max-width:700px; }
- This is not readability format
<div class="osH2"></div>
- Using a descriptive class name like "section-heading" makes it clear to users and other developers what the purpose of the <div> element is, improving readability and maintainability.
0 - This is not readability format
Please log in to post a comment
Log in with GitHubJoin 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