Design comparison
Solution retrospective
no su supe bien como hacer el centrado de la tarjeta responsivamente , asi que solo agregue una altura en body para mas o menos intentarlo hacerlo responsive design
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hola 👋. ¡Buen trabajo al completar el desafío! Tengo algunos comentarios para usted que podría considerar
Para centrarlo verticalmente cambie
min-height: 100%;
conmin-height: 100vh;
, no funciona con 100% porque su elemento html no tiene una altura, en lugar de establecer una altura al html, puede ocupar directamente 100vh.body { min-height: 100vh; /* margin-top: 20%; */ . . . }
HTML:
- Usa la etiqueta
<main>
para envolver todo el contenido principal de la página. de la etiqueta<div>
. Con este elemento semántico puedes mejorar la accesibilidad de tu página.
- Dado que este componente implica escanear el código QR, la imagen no es una decoración, por lo que debe tener un atributo
alt
. El atributoalt
debe explicar su propósito. p.ej.QR code to frontendmentor.io
CSS:
- En lugar de usar píxeles en tamaño de fuente, use unidades relativas como
em
orem
. El tamaño de fuente en unidades absolutas como píxeles no se escala con la configuración del navegador del usuario. Esto puede causar problemas de accesibilidad para los usuarios que han configurado su navegador para usar un tamaño de fuente más grande. Puedes leer más sobre esto aquí.
- Debe usar la propiedad
border-box: box-sizing
para hacer que las propiedadeswidth
yheight
incluyan el relleno y el borde del elemento. Esto facilitará el cálculo del tamaño de un elemento. Puedes leer más sobre esto aquí.
- Debe usar un restablecimiento de CSS para eliminar los estilos de navegador predeterminados y hacer que su página se vea igual en todos los navegadores.
Restablecimientos de CSS populares:
¡Espero que le sea útil! 😄 Sobre todo, ¡la solución que envió es genial!
Marked as helpful0 - Usa la etiqueta
- @derwingPosted almost 2 years ago
Vas a obtener un mejor centrado si haces esto: .container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Marked as helpful0
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