Design comparison
SolutionDesign
Community feedback
- @fernandolapazPosted over 1 year ago
Hola 👋🏻, algo de esto te pode interessar:
HTML / ACESSIBILIDADE:
- Em vez de usar
background-image
, poderia ser melhor usar o elemento <picture>, que é ideal para mostrar diferentes imagens de acordo com o dispositivo ou o tamanho da tela:
<picture> <source media="(min-width: 600px)" srcset="img/perfume.png"> <img src="img/perfume-2.png" alt="descrição"> </picture>
- O ícone é uma imagem decorativa e, portanto, precisa de um atributo
alt
vazio para ser ignorado por um screen reader.
CSS:
- Como parte do reinicio de CSS que você fez, é importante incluir a propriedade
box-sizing
para permitir que incluamos padding e border no ancho e no alto geral dos elementos:
* { box-sizing: border-box; margin: 0; padding: 0; }
- Piense en usar unidades relativas como rem o em, ya que son mejores para diseños escalonáveis. Algo simples para começar seria converter para rem (1 rem equivale a 16px por defeito). Considere esta sugestão especialmente para o
font-size
.
Espero que seja útil :)
Boa solução.
Saudações,
Marked as helpful0 - Em vez de usar
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