Design comparison
Solution retrospective
please, you all tell me what i did wrong
Community feedback
- @correlucasPosted about 2 years ago
๐พHi @brownie55, congratulations on your solution!๐ Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw youโre on the right track. Iโve few suggestions for you that you can consider adding to your code:
1.Add the website favicon inserting the svg image inside the
<head>
.<link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">
2.Note that these sizes given in the
style-guide.md
in the case 1440px for desktop and 375px are only a reference value to say in which dimension the design were created, don't stick to these values because your solution should be fully responsive and fit any screen size.3.Fix the alignment of the whole content using
flex
andmin-height
to manage the vertical alignment and make everything centered.First of all putmin-height: 100vh
to thebody
to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size anddisplay: flex
eflex-direction: column
to align the child element (the container) vertically using the body as reference.4.Think about using relative units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices. Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR
โ๏ธ I hope this helps you and happy coding!
0@MimviliPosted about 2 years ago@correlucas please can i be able to upload my changes on here?
0@correlucasPosted about 2 years ago@brownie55 All you need to do is to update the repository and live site to have the update here, then you update the solution screenshot with changes.
Marked as helpful0@MimviliPosted about 2 years ago@correlucas please give a review on the updated one, thanks
1@correlucasPosted about 2 years ago@brownie55 Remove the
1440px
to make the card align:body { display: flex; flex-direction: column; /* max-width: 1440px; */ min-height: 100vh; align-items: center; justify-content: center; background: hsl(212, 45%, 89%); font-family: 'Outfit', sans-serif; }
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