my solution for QR code component challenge

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 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 or paddings. I use both your way and mine, depending on the project. They are both correct 😊

  I hope it helps!

  Marked as helpful

  0

  ---

  

  chems eddine bourabia•150

  @chemsodevPosted 12 months ago

  hello 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

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  Of 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 helpful

  1

  

  chems eddine bourabia•150

  @chemsodevPosted 12 months ago

  thank 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

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  This 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 helpful

  1

  

  chems eddine bourabia•150

  @chemsodevPosted 12 months ago

  I got it , thanks again sir. @danielmrz-dev

  1