All comments

• 

  dandamudi2•50

  @dandamudi2Submitted almost 2 years ago

  1. I was unable to align the QR code component to vertically align center. Could some body give suggestions to achieve that.
  2. How to align the component header text and body text align center? (

  <h3>Improve your front-end skills by building projects</h3> <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p> ) 3) How to add multiple media queries to deal with various mobile screens? or can handle all mobile screens with single media query?

  

  Responsive QRCode component design with html & css.

  3

  51
  

  ricar1990•20

  @ricar1990Posted almost 2 years ago

  hola, Un saludo desde Republica Dominicana.

  Yo lo haría de la siguiente forma.

  1- Según la solución el contenedor principal no esta centrado en la pantalla completa. puedes darle al body un display: flex; , align-items:Center; , justify-content: Center; , si no se alinea le daría un flex-direction: column; ,

  2- Tienes que darle un tamaño al contenedor con clase .QRBody pues si no le das un tamaño el contenedor crecerá de acuerdo al contenido, ve dándole un tamaño hasta que veas que el contenido quede igual a la imagen de ejemplo. También debes darle tamaño al h1 y los demás elementos. Tienes que utilizar el inspector para que puedas observar el tamaño de cada elemento porque mucha veces queremos centrar algún elemento dentro de un contenedor sin espacio interno disponible para poder centrar y ese espacio lo conseguimos asignando tamaño al contenedor.

  1