QR code component using HTML & CSS (FLEX)

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hola @Valenveraa 👋, ¡Buen trabajo al completar este desafío! 🎉

  Tengo algunas sugerencias que podría considerar para mejorar su código:

  • El contenedor no está centrado correctamente. Puede usar flexbox o [grid](https://developer. mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) diseño para centrar elementos. Puede leer más sobre el centrado en CSS aquí.

  body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .main {
      max-width: 20rem; /* nota [1] */
      min-height: 30.938rem;  /* nota [2] */
      /* margin: 5rem auto; */
  }
  

  • [1] Use el selector de max-width: 20rem en main en lugar de width, esto hará que la tarjeta contenedora se adapte un poco en dispositivos móviles y establecerá el ancho máximo del elemento en 20rem.
  • [2] No se recomienda establecer una "altura" definida para el componente. El contenido debe definir la altura del componente, de lo contrario, no se permitirá que se extienda más allá de sus especificaciones. Alternativamente, puede usar min-height.
  • El texto alternativo no debe contener guiones, guiones bajos o las palabras "imagen" o "foto", porque la etiqueta de imagen ya proporciona suficiente información de que es una imagen.
  • Actualice el selector de imágenes para crear imágenes adaptables.

  .main__image .image {
      /* width: 17.813rem; */
      /* height: 18.125rem; */
      width: 100%;
      display: block;
      border-radius: 0.625rem;
  }
  

  Sobre todo, el proyecto está bien hecho👏. ¡Espero que esos consejos te ayuden! 👍

  ¡Buen trabajo! 😁

  0

  ---

  

  Valentín Vera•90

  @valentinveraPosted almost 2 years ago

  ¡Hola @MelvinAguilar. Gracias por el feedback!

  Respecto a tu respuesta quería comentar algo. El width 100% en el body no es innecesario? Ya que si no me equivoco el body tiene un width por defecto del 100%. Luego aplique al body esas propiedades y me dio el mismo resultado. Es verdad que es una mejor practica para centrar el contenedor.

  Luego en el punto 1 lo cual me comentas sobre el ancho y alto del main no entiendo muy bien ese comentario, ya que el diseño lo hice primero adaptable para móvil y se adaptaba perfectamente, capaz en tu navegador o celular no se adaptó correctamente, pero yo lo veía bien. Tampoco le puse un min-height ya que como se ve en el desafío el componente/card no se estira más en resoluciones más altas a 375px.

  Luego sobre el texto alternativo si estuvo demás la palabra imagen. Lo que si no entiendo muy bien el link sobre crear imágenes adaptables. Ya que la imagen yo la vi adaptable al responsive, y si ya he practicado sobre hacer imágenes responsives en proyectos personales pero nunca está demás repasar.

  Sobre el display block no entendi mucho porque lo aplicaste, ya que la imagen está contenida por una etiqueta de bloque como lo es div.

  Muchas gracias @MelvinAguilar por los consejos y por el feedback. Saludos!

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @Valenveraa "El width 100% en el body no es innecesario?" Excelente respuesta, se me escapó completamente que el body lo tiene por defecto

  Luego, utilizando la herramienta de inspeccionar elementos, actualmente en un dispositivo de 320px de ancho, su challenge toca los bordes de la pantalla, una solución sería utilizar un margin de por ejemplo 1rem en el elemento main, sin embargo, como su imagen estaba con un ancho establecido de width: 17.813rem; su componente mantiene siempre el ancho y el margin queda "afuera" de la pantalla; con "width: 100%" su componente se re-dimensiona y logra hacerse más "delgada", con lo que se puede apreciar el margen.

  Luego con min-height es recomendable porque puede reutilizar este componente para otros fines, no solamente para este desafió, entonces al utilizar una altura definida, si el elemento <p> crece demasiado, terminaría solapando el componente, es solo un aviso de advertencia

  Un ejemplo de esto: https://imgur.com/AN4nuP0

  Y el display: block, al parecer se me escapó, yo no lo encierro por un div y lo coloque por instinto, utilizó display block para tener control completo, porque una imagen suele tener un pequeño margen inferior que no se puede quitar, puede intentarlo, coloque su imagen directamente en el componente y verá un pequeño espacio entre los demás elementos y la imagen

  Muchas gracias por recalcar los puntos, Saludos

  0