Responsive Qr code componenent

Community feedback

• 

  P

  Daniel 🛸•44,430

  @danielmrz-devPosted 11 months ago

  Hello @Lawrencekalaw!

  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
• 

  Marley Semende•570

  @Marley-SemendePosted 11 months ago

  Hi @Lawrencekalaw. nice solution! I found a few issues with your css. In your .container{} you used properties like justify-content and align-items but I noticed that your .container{} is not defined as a flex container. To define a flex container you need to set the display: flex; first. However according to the structure of your HTML file, .home{} is the one to be defined as the flex container not . container{}. Another thing I noticed is that in your media query your .home{} margin is set to 30px 500px 0. This margin may cause .home{} to extend beyond the viewport width on smaller screens. You should adjust the margins to fit the smaller screen sizes.

  Marked as helpful

  0

  ---

  

  Lawrencekalaw•60

  @LawrencekalawPosted 11 months ago

  Alright thank you let me review@Marley-Semende

  0