@correlucas
Posted
👾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 and min-height to manage the vertical alignment and make everything centered.First of all put min-height: 100vh to the body 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 and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.
4.Think about using relative units as rem or em instead of px 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!
@Mimvili
Posted
@correlucas please can i be able to upload my changes on here?
@correlucas
Posted
@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 helpful
@Mimvili
Posted
@correlucas please give a review on the updated one, thanks
@correlucas
Posted
@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 helpful
