@MelvinAguilar
Posted
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
CSS π¨:
-
Using
h-screen
(height: 100vh
) to center the element can cause problems with the layout of the page on smaller screens, such as in landscape view on a mobile device.On smaller screens, such as in landscape view on a mobile device, the height of the viewport may be less than the height of the content of the page. In this case, using
h-screen
will cause the content of the page to be hidden behind the body element.Here is an image of how it would look on a mobile device (taking into account the scroll): screencapture-qr-code-component-35c88e-netlify-app
To avoid this problem, it is generally recommended to use
min-h-screen
(min-height: 100vh
) instead ofh-screen
. This will ensure that the content of the page is always visible.
HTML π:
-
Wrap the page's whole main content in the
<main>
tag. -
Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source π.
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
@kaangmamat
Posted
@MelvinAguilar Great! Thank you for your suggestions, help me to make clean code and consistent hierarchy for better documentation.