QR Code Component Challenge

Solution retrospective
I'm most proud that the project looks like the prototype. However, I know I have some text alignment problems.
What challenges did you encounter, and how did you overcome them?I couldn't find a way for the text to look exactly like the prototype.
What specific areas of your project would you like help with?Any valid points are more than welcome. I'm not sure if I used the semantic HTML the right way, and I would appreciate some tips on how to improve my css
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Guille-Sanchez
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!
- @MadsenBK
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.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord