Design comparison
Community feedback
- @MelvinAguilarPosted over 1 year ago
Hello π. Congratulation on successfully completing your first challenge π ! !
I have some recommendations regarding your code that I believe will be of great interest to you.
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 π
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute. Thealt
attribute should explain its purpose. e.g.QR code to frontendmentor.io
- There is a lot of nesting of
<div>
elements in this challenge, it can even be completed using only one container.
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): screenshot-imgur πΈ
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.
- There is also no need to use
sm:h-[60rem]
this does not center vertically on desktop devices.
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful1 - Wrap the page's whole main content in the
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