QR Code Card using HTML & CSS

Please log in to post a comment
Log in with GitHubCommunity feedback
- @PhoenixDev22
Greeting @layse-dev,
Congratulation on completing your Frontend mentor challenge,
I have few suggestions regarding your solution:
-
There should be two landmark components as children of the body element - a
main
(which will be the component ) and afooter
(which will be the attribution).<Footer>
should not be in the<main >
. HTML5 landmark elements are used to improve navigation . -
To center the card on the middle of the page , you can use the flexbox properties and
min-height: 100vh
for the<body>
.
body { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; }
-
In
width: 280px;
Consider usingmax-width:
instead, Then add a little margin on the component or padding on the body to stop it hitting screen edges. -
height: 420px;
It's rarely ever a good practice to set heights on elements, you almost never want to set it . let the content define the height . -
It's recommended to use
em
andrem
units .Bothem
andrem
are relative units , Usingpx
won't allow the user to control the font size based on their needs. -
It's recommended not to use
px
for font-size. you can use rem instead .
Overall , your solution is good. Hopefully this feedback helps.
Marked as helpful -
- @denielden
Hi Layse, I took some time to look at your solution and you did a great job!
Also I have some tips for improving your code:
- add
main
tag and wrap the card for Accessibility - Centering with
absolute
positioning is now deprecated, it uses modern css likeflexbox or grid
- use flexbox to the body for center the card. Read here -> best flex guide
- after, add
min-heigth: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px
try to use relative units of measurement -> read here
Overall you did well :)
Hope this help and happy coding!
- add
Join 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