QR Code Component Challenge

Hi! There are many ways in which you could try to center a div in CSS; however, from some years it has become a 'standard' to use Flexbox or Grid because it is way simpler.

The advantages of using those previous methods is that you do not need to use position relative/absolute, and it usually takes 2/3 lines of css to center a div. I highly recommend you look into any of them. Many people find Grid easier, but grid and flexbox have their own use-cases. I do recommend you to practice a lot one method and once you've mastered it study the other. It is really confusing to study both at the same time.

Another note, try to make the width and heights of your container responsive. Meaning, it is way easier if the parent container has no size and the children provide the height. For example, .qr-container has height = 500px. If the image needs to increase probably that number should also increase and it would be nice if that change was made automatically. for example.

.qr-container without a height img with a height determined by you h2 and p in a div and this div has a padding top and bottom that gives the .qr-container the height you want

I kown I said a lot, and it may be a lot of concepts to learn from scratch, so DO NOT WORRY. By doing many more projects it becomes a second nature. You are in a good track!

I found this code on stackoverflow after I did this challenge but it has helped me centering my projects. Try adding this to your '.qr-container' in your css:

position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

You can find the post here if you need: https://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally

I hope it helps :-D.