Design comparison
Solution retrospective
Hello, I finished the QR code challenge but I feel like the white background with the class (.bg) could have been done in a better way. I would like to know what you all think?
Community feedback
- @danielmrz-devPosted 9 months ago
Hello @SalmaW03!
Your project looks great!
I have one suggestion for you to improve it even more:
- Using
margin
is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:
š Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; display: flex; /* it works with grid too */ justify-content: center; align-items: center; }
I hope it helps!
Other than that, great job!
Marked as helpful0@SalmaW03Posted 9 months ago@danielmrz-dev
Hello, thank you so much for your response, it did indeed help me so much with positioning the elements. I added the code that you wrote to the body and removed all margins and the position and everything centered perfectly. I do appreciate you taking some time to help me improve my code and I will surely use your tips from now on.
1 - Using
- @CairoGarbPosted 9 months ago
Hey! Regardings of the .bg, maybe using display: flex. The measures "rem" or "pixels" instead of "%" could improve it. Flex would improve the alignment of the division, not needing to manually center the main container on the center of the page. I noticed that you used "position: absolute" on the image, maybe if you change the width of img to 100%, remove the absolute position and the margin left and in the "h2", remove the margin top aswell. Was well done, good job!
Marked as helpful0@SalmaW03Posted 9 months ago@CairoGarb
Hello, thank you so much for your feedback it really helped me improve my code. I found the positioning to be so much easier when I used flex instead of margins, and when I removed my absolute position and changed my img width to 100% everything fell in to place. I do appreciate you taking some time to help me improve my code and I will surely use your tips from now on.
0
Please log in to post a comment
Log in with GitHubJoin 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