Design comparison
SolutionDesign
Community feedback
- @MelvinAguilarPosted 10 months ago
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 helpful0@MisterCcobDPosted 10 months ago@MelvinAguilar Great advice! Is much nicer now. Thank you.
1 - Since this component involves scanning the QR code, the image is not a decoration, so it must have an
- @MercySpecturesPosted 10 months ago
Try to write code in a way so that the output of your code can look similar to the design provided.
- Change the size of main text(Heading).
- Try to place your card at center of your page.
Marked as helpful0
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