Skip to content
Submitted 10 months ago

3 Column preview card usando flex e grid

João Paulo•70
@JoaoPaul-S
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

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,870
    @rayaattaPosted 10 months ago

    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

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