Design comparison
SolutionDesign
Solution retrospective
I recreated the QR component challenge (Responsive version).
Community feedback
- @danielmrz-devPosted 12 months ago
Hello @Mr-Azeez!
Your project looks great!
I have a few suggestions for you to improve it:
-
I noticed that you used margin to place your card closer to the middle of the page. Here are two simple and very efficient ways to do it without margins or paddings:
-
You can apply this to the body (in order to work properly, you can't use position or margins):
body { height: 100vh; display: flex; justify-content: center; align-items: center; }
Or you can apply this to the element you wanna center:
.element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- You could also give the text a little
padding
. They are too close to the borders.
I hope it helps!
Other than those little details, you did a great job!
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