QR Code made with native CSS and HTML

Community feedback

• 

  Ken•935

  @kenreibmanPosted over 2 years ago

  Hey! I will give you an easy, modern, and professional way to easily center a div.

  • Have a parent container. Usually in little component challenges like this, your parent container ends up being your body.

  • in CSS, set:

  body {
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
  }
  

  • Anything in your body tag will be centered perfectly in the middle.

  You're also missing the QR code image in your final website design. I looked at your GitHub repository really quick, and noticed that you didn't upload any of the image files. The repository won't know where to look for images if it's not uploaded!

  I know it's your first project, and you will get better and better the more challenges you try and complete. Keep it up!! I hope this was helpful.

  1
• 

  Abdelrhman Kamal•450

  @AbdelrhmanX7Posted over 2 years ago

  Hi graesyn jones if you want to center div in center of page make the div as child and give it position: absolute / top: 50%; left:50%; tranfrom: translate(-50%,-50%) and parent => position: relative or you can use flex parent => display: flex; justify-content: center; align-items:center; and you can check all ways to center an element in page => (https://blog.hubspot.com/website/center-div-css)

  0

  ---

  

  Ken•935

  @kenreibmanPosted over 2 years ago

  @AbdelrhmanX7 The absolute positioning method is really outdated/ineffective and I wouldn't recommend teaching someone how to use that anymore, but the article is helpful!

  0