Responsive QR Code Component Using Flexbox

In this instance, your main and div elements could be contained within a wrapper/container to solve this issue, allowing you to use grid to force their positions.

article{
	display: grid;
	grid-template-rows: 1fr auto;
	place-items: center;
        min-height: 100vh;
}

  <article>
    <main>
    </main>
    <div class="attribution">
    </div>
  </article>

This would eliminate the need for a position fixed on your footer attribution.

@meillee According to me, there is another way to implement it, but I am open to better options from others too.

You can use about two display:flexs. The outer one can probably have justify-content:space-between;flex-direction:column while the inner one can probably have align-items:center. If there is enough space and it is also your preference, you can also add align-content:center, but you would need to add flex-wrap:wrap for it to work.

This might make it look like the footer is at the bottom of the screen, while the QR code part is at the center of the screen. But the problem is width and height. While the width might not be as much a big problem, the height would be, considering different devices have different screen height.

Hi Mei Lee

Fantastic work🎉

One suggestion from my side, never ever give height and width on a body, it only break your layout. So, my suggestion is to give min-height instead of height you used in body. In smaller project this is negligible but, when you work with larger project in future, then the layout will break if you use body { background-color: hsl(212, 45%, 89%); height: 100%;(use min-height: 100vh) font-family: "Outfit", sans-serif; justify-content: center; align-items: center; padding: 1rem; }

And one more thing about using footer: Using footer fixed to bottom that is good practice, no need to change it