Design comparison
Solution retrospective
I had a difficulty on making the exact sizing and spacing from the project's design preview. I think there are some of my styling code that still inefficient or not accurate for the design. So, could you tell me which part of my code that still have flaws?
Community feedback
- @HassiaiPosted almost 2 years ago
Replace <div class="container"> with the main tag. There is no need to give the body a width value. To center a content on a page, add min-height:100vh; to the body instead of height:100vh; Give .desc-wrapper a padding value instead of margin value .
Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful]
Well done for completing this challenge, you a good job. Happy coding
Marked as helpful1 - @SinisaVukmirovicPosted almost 2 years ago
Hello!
To improve flaws in code, start with fixing errors in your report.
This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.
This "All page content should be contained by landmarks" means all non semantic elements should be inside of semantic elements, and not directly inside of <body> element.
More about semantic elements
Also, you have 2 same Google Font imports in your CSS.
Rest looks OK.
Hope this helps!
Marked as helpful1
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