QR Code Component

With this specific project, I was happy to acknowledge how off the width and height was in my original mobile design. Oh my goodness, haha. The content was all the way at the bottom. Thanks to a colleague, I learned how to palce the content where it needed to be (Centered) in order to be viewed correctly by viewers:

 body {
      min-height: 100vh; 
      display: flex; 
      flex-direction: column; 
      align-items: center; 
      justify-content: center;
      font-family: var(--font-family);
      font-size: 15px;
  }

A key takeaway here are the minor details. The minimum height of 100 View-Height simply means that we are ensuring that the body is "no less than" 100vh. From here, simply flex the [body] tag and center the content & items shown above.

Although "content" & "items" do the same function, the key difference between the two concepts, respectively, is that content applies to more than 1 flex-container within with in a parent container as long as there is extra space & items applies to all flex containers, while setting the default alignment on the cross-axis.

With this code, you can pretty much say that the [div.container] is locked in and centered.

Thank you for reading!