@MelvinAguilar
Posted
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML ๐ท๏ธ:
- 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 ๐จ:
To center it, avoid using large margins that distort the card. You can use flexbox or grid to center it, and apply a max-width on the .card to prevent it from growing too much.
main {
/* margin: 10vh auto; */
/* width: 74%; */
max-width: 320px;
[...]
}
body {
background-color: hsl(212, 45%, 89%);
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
@MisterCcobD
Posted
@MelvinAguilar Great advice! Is much nicer now. Thank you.