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

3 Column preview card usando flex e grid

@JoaoPaul-S

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


O projeto foi relativamente bem fácil, considerando que foi minha 1° vez usando grid para construir um, o que acho que me levou ao único problema real que tive na construção do projeto. Na construção do responsivo a centralização do card foi um problema em alguns tamanhos ficava muito pra direita e em outros muito pra esquerda, resolvi isso colocando alguns media queries adicionais que diziam uma porcentagem de largura que o container deveria se posicionar na tela, isso obviamente deixa o código mais verboso do que deveria, então oq fiz de errado? É alguma especificidade do display grid? Ou um erro no código do body do display flex? realmente me passei aqui

Community feedback

raya 2,850

@rayaatta

Posted

Hola 👋JoaoPaul-S, Creo que tu red no tiene problemas.

Pero tengo algunas sugerencias para mejorar su código.

1 Cambie height: 100vh; en el cuerpo a min-height:100vh; Esto asegura que el contenido no se desborde en dispositivos cortos o dispositivos móviles en modo horizontal.

2 Noté que font-size estaba configurado en px en tu código. Nunca debes usar píxeles al configurar propiedades relacionadas con fuentes. Establecer tamaños de fuente en píxeles causa problemas de accesibilidad a las personas que ajustaron sus tamaños de fuente predeterminados en sus computadoras. Las mejores unidades para configurar el tamaño de fuente son las unidades relativas como rem y em, que pueden ajustarse según las preferencias del usuario. Mira este artículo por qué el tamaño de fuente nunca debería estar en píxeles

3 Dado que el .button es un elemento en el que se puede hacer clic Agregar cursor:pointer; A ello en CSS

Espero que esto ayude.

Tu solución es increíble 🤩

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