QR Code Component

Community feedback

• 

  Vinicius Lima•30

  @ViniciusLCLimaPosted 8 months ago

  With your div with a class of qr-card being the child of the body element, you could turn the body into a flex box, justify-content: center, align-items: center and then set the height of that same body element to 100vh, vh is a unit that divides the view height by 100, so you'll have a body element with the same height as view height of the page in your browser, also remove the default margins by adding margin:0px to body. As the body element will be as big as the view height and have no margin and qr-card div will be positioned in the center and in the middle of it, the card will be centralized in the middle of the screen. To summarize: body {display: flex; justify-content: center; align-items:center; height: 100vh; margin:0px)

  Another thing you could do is to substitute the first "div" tag to a "main" tag. This will make it easier for people with disabilities to understand your page.

  Marked as helpful

  1

  ---

  

  Sam•10

  @Sam-LemonPosted 8 months ago

  @ViniciusLCLima Thank you! That makes so much more sense. And thank you for pointing out the changing that first div to a main, I appreciate it.

  1
• 

  D. Jaime Blockton•180

  @digigrrl525Posted 8 months ago

  Good job. It looks like you figured out how to center divs. One trick I learned is that to use (margin=0, auto) the width has to be set first to work properly.

  0