QR code component using Transform and Positioning

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  To center the main on the page using flexbox or grid instead of position: absolute:

  For a responsive content, replace the width in the main and the img with max-width.

  • USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

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

  • USING GRID: Add min-height:100vh; display: grid place-items: center to the body

  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Give h1 and p the same font-size of 15px which is 0.9375rem.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0
• 

  Umer Khokhar•220

  @Umer-KhokharPosted over 1 year ago

  @AlgerTitaJean Hi there,

  Your design looks so so good!. But there are some suggestions for better code

  1. Always use flexbox to center items (Your design did not look good on mobile devices)
  2. Using position: absolute; cause problems when you working on large or complex web pages (May overlap content)

  0
• 

  Basant Soni•450

  @SoniBasantPosted over 1 year ago

  This is very good. : )

  0