QR code component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, BreinerJT! 👋

  Congratulations on finishing this challenge! 👏

  Some recommendations from me.

  • Remove width and height from the main. Never use 100vw on anything as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.
  • To make the card in the middle of the page, I would recommend making the body element as a flexbox container. It is much shorter and easier to implement then using the relative positioning with transform property.

  /**
   * 1. Make the card vertically center and
   *    allow the body element to grow if needed
   */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* 1 */
  }
  

  • The card only needs a max-width to prevent it from becoming too large on wide screen sizes. So, I recommend setting a max-width and then removing the width and the height properties.
  • I suggest setting all the elements box-sizing: border-box with universal selector. This will prevent any elements from adding more width every time you add some padding.

  Hope this helps.

  Marked as helpful

  0

  ---

  

  BreinerJT•530

  @BreinerJTPosted over 2 years ago

  Thanks @vanzasetia, I had never thought on this way to put the elements in the middle of the page, thank you for all your advices.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @BreinerJT No problem! 👍

  0
• 

  wavegate•220

  @wavegatePosted over 2 years ago

  Nice job on using semantic HTML. I would work on ensuring the obvious distortion in the width/height of the square image file, and make sure padding is consistent around all sides of the image to meet whitespace consistency, which will bring the design up a notch.

  Marked as helpful

  0