hi there! 👋
you can center your content with Flexbox if you apply these to the body tag:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Hope this was helpful 🙏
Good luck and happy coding! 🙌
2
Design comparison
Solution retrospective
What are you most proud of, and what would you do differently next time?
-
Next time instead of writing style in the head. I will link the CSS style file in the head.
-
Furthermore, I'll try to use different method for placing the QR code box. For now, I have used flexbox but I want to try other methods such as using position property etc.
What challenges did you encounter, and how did you overcome them?
I made many newbie mistakes such as forgot to
- close the quotation mark
- set the height of the div element and had issues with image not showing up.
I overcame them using AI tools such as ChatGPT and Phind.
What specific areas of your project would you like help with?
- Initially for setting the position of the container-card box I thought to set the width and height to auto.
- Later I realized that when set auto, the element get equal spacing from left and right but it can only be applied to width. It doesn't work on height.
- So is there any way to use this method (width: auto and some other properties) to align the box in the center of the body.
Community feedback
Please log in to post a comment
Log in with GitHub
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