Design comparison
Solution retrospective
Please tell me how I can improve
Community feedback
- @flaviare1sPosted 10 months ago
Oi Vinicius! O seu projeto ficou muito bom em tela grande, mas no meu celular está cortando.
Vou fazer algumas sugestões, tá bom?
Provavelmente isso está acontecendo porque você colocou a imagem como background.
Sugiro que você coloque a largura da div.container fixa (por exemplo, 300px) e coloque a imagem dentro da div.section__qr, com width de 90% (retira a imagem do background-image). Lembra de ajustar o border-radius da imagem.
Também retira todas as height, com excessão da do body.
Eu deixaria apenas uma media query, a de telas pequenas (375px).
Espero ter ajudado!
Marked as helpful0 - @danielmrz-devPosted 10 months ago
Fala Vini! @ViniCellist
Sua solução ficou excelente!
Tenho duas sugestões:
- Primeira: Por questões semânticas, e por ser o título principal da tela, você pode substituir o
<h2>
por<h1>
. Ao contrário do que a maioria das pessoas pensa, a diferença entre os HTML headings não é só sobre o tamanho e peso do texto.
📌 As tags
<h1>
a<h6>
são usadas para definir títulos em HTML.📌
<h1>
define o título mais importante.📌
<h6>
define o título menos importante.📌 Use apenas um
<h1>
por página - isso deve representar o título principal de toda a página. Além disso, não pule os níveis de título - comece com<h1>
, depois use<h2>
e assim por diante.- Segunda: Não precisa utilizar
<main>
e<section>
pro conteúdo principal. Use apenas a tag<main>
.
📌 Além disso limpar seu código, a tag
<section>
faria mais sentido se o card fosse parte de um site maior, mas aqui ele é o conteúdo principal.Essas mudanças tem pouco ou nenhum efeito visual, mas tornam seu código HTML mais semântico, melhorando a otimização de SEO e também a acessibilidade do seu projeto.
Espero que ajude!
Fora isso, você fez um ótimo trabalho!
Marked as helpful0@ViniCellistPosted 10 months ago@danielmrz-dev Vou aplicar suas sugestões agora mesmo...muito obrigado!!
0@ViniCellistPosted 10 months ago@danielmrz-dev feito! Muito obrigado pelas dicas!
0 - Primeira: Por questões semânticas, e por ser o título principal da tela, você pode substituir o
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