QR Code using basic HTML and CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 9 months ago

  Hello @SalmaW03!

  Your project looks great!

  I have one suggestion for you to improve it even more:

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

  0

  ---

  

  Salma•20

  @SalmaW03Posted 9 months ago

  @danielmrz-dev

  Hello, thank you so much for your response, it did indeed help me so much with positioning the elements. I added the code that you wrote to the body and removed all margins and the position and everything centered perfectly. I do appreciate you taking some time to help me improve my code and I will surely use your tips from now on.

  1
• 

  CairoGarb•810

  @CairoGarbPosted 9 months ago

  Hey! Regardings of the .bg, maybe using display: flex. The measures "rem" or "pixels" instead of "%" could improve it. Flex would improve the alignment of the division, not needing to manually center the main container on the center of the page. I noticed that you used "position: absolute" on the image, maybe if you change the width of img to 100%, remove the absolute position and the margin left and in the "h2", remove the margin top aswell. Was well done, good job!

  Marked as helpful

  0

  ---

  

  Salma•20

  @SalmaW03Posted 9 months ago

  @CairoGarb

  Hello, thank you so much for your feedback it really helped me improve my code. I found the positioning to be so much easier when I used flex instead of margins, and when I removed my absolute position and changed my img width to 100% everything fell in to place. I do appreciate you taking some time to help me improve my code and I will surely use your tips from now on.

  0