@MelvinAguilar
Posted
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
Alt text π·:
- The
alt
attribute should not contain underscores or hyphens, it must be human readable and understandable.
-
The
alt
attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a betteralt
attribute would beQR code to frontendmentor.io
If you want to learn more about the
alt
attribute, you can read this article. π.
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.
This is a picture of what mobile devices look like: screencapture-duckit69-github-io-qr-code-component
Update to this:
.holder {
/* max-width: 18%; */
max-width: 320px;
margin: 1rem; /* Add a small margin*/
. . .
}
- Use
box-sizing
in the * selector, not just in the body, so that all elements have that property.
Do:
* {
box-sizing: border-box;
}
Instead of:
body {
box-sizing: border-box;
}
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
@duckit69
Posted
@MelvinAguilar i really cant thank you enough both u and the guy before u are giving valuable informations really thank u