QR code component

Community feedback

• 

  Youssef Waleed•200

  @ywsolimanPosted about 2 years ago

  Hey @leoweabo, I hope you're doing great!

  To perfectly center your wrapper horizontally and vertically:

  • Using Flex:

  html, body {
      height: 100%;
  }
  body {
      margin: 0;
  }
  .wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
  }
  

  • Using Grid:

  html, body {
      height: 100%;
  }
  body {
      margin: 0;
  }
  .wrapper {
      display: grid;
      place-content: center;
      height: 100%;
  }
  

  • Using Position:

  html, body {
      height: 100%;
  }
  body {
      margin: 0;
      position: relative;
  }
  .wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  

  Here's my solution using if you want to take a look: https://www.frontendmentor.io/solutions/qr-component-using-css-flex-FxuBLT9kE9

  Keep up the great work!👏

  Marked as helpful

  1

  ---

  

  Leonardo•250

  @LeonardclcPosted about 2 years ago

  @ywsoliman Thank you very much! That was exactly what I needed!

  0
• 

  Ruben•30

  @ReXLLeXPosted about 2 years ago

  Hii!! A quick solution for bad resolution of the image is changing the width:"290px" to auto

  Hope this can help you!!

  0

  ---

  

  Leonardo•250

  @LeonardclcPosted about 2 years ago

  @ReXLLeX It does make it better but it looks different from the official design, there's too much space between the image and the wrapper border

  0