qr-code-component solution

Community feedback

• 

  4LastBreath•210

  @4LastBreathPosted about 1 year ago

  Hey, looks like there's some issues in your css. You have no width on your body and no height on your class container. If you talk about using flexbox in your body to center your card you can do it like this.

  body {
     background-color: var(--light-gray);
     font-family: var(--font1);
     min-height: 100vh;
     height: 100%;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  
  .card {
     padding: 18px;
     background-color: white;
     border-radius: 16px;
     box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.199);
     width: 350px;
  } 
  

  and remove all style of your class container. (you can also delete it in the html).

  Marked as helpful

  1

  ---

  

  ivan-josef•70

  @ivan-josefPosted about 1 year ago

  @4LastBreath

  So the container class is unnecessary? Since I can configure the body and to use flexbox I always need to determine the width and height in the class from outside?

  thanks.

  1

  

  4LastBreath•210

  @4LastBreathPosted about 1 year ago

  @ivan-josef

  Yes the container class is unnecessary for this case and was also the reason your flexbox didn't work. The parent element needs space inside to center his childs elements with flex, you can use the console to help you find which element is causing you a problem. 🖖

  Marked as helpful

  0