@krushnasinnarkar
Posted
Hi @CAF2801,
Congratulations on successfully completing the challenge!
Your solution looks great, but I have a few suggestions that might help improve it:
-
QR Image Visibility: It seems the QR image isn't visible because the image file wasn’t uploaded to your repository. Please upload the image file and update the
src
attribute of theimg
tag accordingly. -
Dimensions: Avoid using fixed units like
px
for width and height. Instead, use relative units such as100%
for width and100vh
for height to make your design more responsive. -
Centering the Component: The current method of using
margin
to center.main-content
isn’t ideal. For perfect centering, use Flexbox. You can achieve this by adding the following styles to#container
:display: flex; align-items: center; justify-content: center; height: 100vh;
This will center
.main-content
both vertically and horizontally.If you're not familiar with Flexbox, you can learn more here:
I hope you find these suggestions helpful.
Feel free to reach out if you have more questions or need further assistance.
Happy coding!
Marked as helpful
@CAF2801
Posted
Thank you so much for the feedback. I'll check the links you gave me for sure ! @krushnasinnarkar