Design comparison
Solution retrospective
I found this a nice, quick starter project. I'm very impressed with the concept of the site and am looking forward to doing more challenging tasks.
If you have any feedback, let me know.
Community feedback
- @danielmrz-devPosted 10 months ago
Hello @JJenk89!
Your project looks great!
- Using
margin
is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:
š Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; display: flex; /* it works with grid too */ justify-content: center; align-items: center; }
I hope it helps!
Other than that, great job!
Marked as helpful1 - Using
- @gfunk77Posted 10 months ago
Hi! Great job on your solution. The card looks really nice. Here are some suggestions that might interest you:
- If you would like to center the card on the screen, add
body { min-height: 100vh }
. Otherwise, if you like it positioned as is and don't want to add min-height, you can remove thejustify-content: center
because that is not having any effect. - on the .qr-code you can remove the align-content because that is also not having an effect on your code due to the default property of flex-wrap: no-wrap which is applied.
You can check this out in your dev tools and experiment.
I mention these things because I love how minimalist your code is. I thought it would be fun to push it even further! I hope these suggestions are helpful!
Marked as helpful1 - If you would like to center the card on the screen, add
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