my solution for QR code component challenge
Design comparison
Solution retrospective
I found a difficulty in centering but I figured it up ,I tried my best and I'm sure of all what I wrote it my code.
Community feedback
- @danielmrz-devPosted 11 months ago
Hello, @chemsodev!
Your project looks very nice!
You did a great job centering your card using
position
.There's another very good way, in case you wanna practice more:
body { height: 100vh; display: flex; justify-content: center; align-items: center; }
This will place your card in the middle of the page with no need for
margins
orpaddings
. I use both your way and mine, depending on the project. They are both correct 😊I hope it helps!
Marked as helpful0@chemsodevPosted 11 months agohello sir @danielmrz-dev , thank you so much for your advice I think it's pretty nice way to center the card cuz it's looks simple ,I hope U will see my other solutions when I post them . I have a question when I use your way the card is goes in the center but it's still in the left ,maybe I need to add something? cuz I think it's only control the height ,help me please.
1@danielmrz-devPosted 11 months agoOf course!
I'm gonna keep track of your projects so I can help you! 😊
About centering the card, this technique I gave you can center the card both vertically and horizontally. I checked your code and applied what I told you and it worked just fine.
In order to work properly, you can't use position and margins simultaneously. Give it another try, I ensure you it works!
@chemsodev
Marked as helpful1@chemsodevPosted 11 months agothank you so much sir @danielmrz-dev , I tried once again and it works like magic ,it's much better than the way that I used , and in only 3 lines. I really appreciate your advices , I have another question: is it okay to use this method in bigger websites that are more complicated I mean the "display: flex;" in the body
1@danielmrz-devPosted 11 months agoThis method is nice for small projects with centered elements. In bigger websites, it's not that simple, because many other elements are involved. What I mean is each case is different and we choose the best option considering what the project requires.
@chemsodev
Marked as helpful1
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