@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-enreina-frontend-mentor-qr-code-component
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 📄:
-
Use the
<main>
tag to wrap all the main content of the page instead of the<div>
tag. With this semantic element you can improve the accessibility of your page. -
Always avoid skipping heading levels; Always start from
<h1>
, followed by<h2>
, and so on up to <h6> (<h1>,<h2>,...,<h6>).
- 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
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
@enreina
Posted
@MelvinAguilar thank you so much for the really comprehensive & valuable feedback! Learned so much from your comment — will definitely update my solution!