Responsive QR code component

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done.

  • Why are there two bodies in your html? This is causing issues with your page.
  • Why is `` inside your css?

  You can do this very easy with flexbox no need to use position. Apply these on the body

  /* this will place the card in the middle of the page */
  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  Marked as helpful

  0

  ---

  

  odpage•10

  @odpagePosted over 1 year ago

  @hitmorecode thanks for taking the time to leave feedback. I'll try this out.

  What do you mean by two bodies? I can only see one.

  0

  

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  @odpage strange when I first opened there were two bodies 😅. The style inside css, is there a reason why you have it there? Normally it doesn't belong inside the css file.

  0
• 

  Quelleris•190

  @QuellerisPosted over 1 year ago

  Hi, using flexbox to center content on the screen is perfectly fine and it is a much better solution than using position absolute, as it will make layout more responsive. If you want to center the component, you can use display: flex on body element, like this:

  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  Also consider using rem units instead of vw for setting width of the component.

  Great job on this challenge and happy coding.

  Marked as helpful

  0

  ---

  

  odpage•10

  @odpagePosted over 1 year ago

  @Quelleris thanks very much for your feedback.

  Is there an ideal use case for rem versus vw? Between %, em/rem and vw/vh I'm struggling to know which is best for which purpose...

  0