Design comparison
Solution retrospective
The area of code I was unsure of was making the site mobile responsive. Is there any way to use flexbox to make a site responsive for different screen sizes?
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
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.
- 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
CSS ๐จ:
- Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of
320px
or20rem
to make sure that the component will have a maximum width of320px
on any device, also remove thewidth
property with a percentage value.
-
Using
height: 100vh
orheight: calc(100vh - 1px);
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 height: 100vh for the body element 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-ben1499-github-io-qr-code-component
To avoid this problem, it is generally recommended to use
min-height: 100vh
instead ofheight: 100vh
. This will ensure that the content of the page is always visible.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful1@ben1499Posted almost 2 years ago@MelvinAguilar Thank you for the feedback. Really helpful.
0 - Use the
- @HassiaiPosted almost 2 years ago
it is not a good practice to give an id of a class a name of root because root is another name for the html, it is the parent element for all other elements in the html, change the id with the name of root to another name.
Replace the first div with the main tag and the alt attribute
alt=" "
to the img tag to fix the error and accessibility issue. click here for more on web-accessibility and semantic htmlThe value for the alt attribute is the description of the image.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful1
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