pagina responsiva con csss y flex box

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 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%; con min-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 atributo alt 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 o rem. 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 propiedades width y height 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:

  • Normalize.css
  • Reset CSS

  ¡Espero que le sea útil! 😄 Sobre todo, ¡la solución que envió es genial!

  00

  Marked as helpful
• 

  Derwing Medina•200

  @derwing

  Posted over 2 years ago

  Vas a obtener un mejor centrado si haces esto: .container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }

  00

  Marked as helpful