Design comparison
Solution retrospective
I made this project using HTML and CSS. The main problem I faced was to center the container div but I did it using flexbox and making the height as 100vh, if there is an alternate of it without making height as 100vh using Flexbox, kindly suggest me. And also I am not sure how it's working in mobile as I haven't used media queries so give your suggestions for it as well
Community feedback
- @Sujood-QureshiPosted almost 2 years ago
Hey Kartik! 🙋♂️
Good job on completing the Qr code component challenge
So here is a tip you can make your main component center without giving the parent container 100vh height.
You can use position: absolute; to place your element where ever you want. But positioning absolute is not good practice because that will give you trouble while making your page responsive. You can learn about CSS position properties here.
I have some suggestions for you about your code.
-
Use <main> tag to wrap the page's main content instead of <div> tag. It will show the search engines that the particular content is essential on that page. You can read more about <main> tag here.
-
You should use the <h1> tag instead of the <h3> tag. it is a best practice to ensure that the beginning of a page's main content starts with <h1>tag element, and also to ensure that the page contains only one <h1>tag element.
I hope you find it useful! May your front-end journey be filled with successful 😊😊
Marked as helpful1 -
- @AhmedMahroussPosted almost 2 years ago
Good job on completing the Qr code component challenge you can do it by two method num1 by flex as display flex justify-content:center; align-items:center; for parent of project num2 you can do it by position:absolute; and from top:50% and left:50; , transform:translate(-50%,-50%) If you have any questions or need further clarification, feel free to reach out to me. Happy Coding! 🎆🎊
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