QR Code Generator

Community feedback

• 

  Razha Jamsik Syah•700

  @Razha90Posted over 2 years ago

  • for auto center you can provide display: flex; on class.main-container . and add justify-content: center; . if you want the height to be auto center align-items: center;

  • don't give height to class.qr-code-holder just let it be auto and give it a padding .

  • give color background-color: hsl(212, 45%, 89%); pada body atau html .

  Happy Codding 😁😁😁😁

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Karthik, congratulations for your solution!

  I've done some changes to your code to fix the alignment, basically I added min-height: 100vh , removed the background from the container and add flex to the body. If you're not too familiar with flex I'll let you a link in the end of the comment with a better explanation. See the changes below:

  body {
      font-family: "Outfit", sans-serif;
      font-size: 15px;
      background-color: var(--Lightgray);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: calc(100vh - 1px);
      margin: 1.25rem;
  }
  
  
  .qr-code-holder {
      /* height: 70vh; */
      background-color: hsl(0, 0%, 100%);
      border-radius: 10px;
      width: 300px;
      margin: auto;
      padding-top: 20px;
  }
  

  Complete guide for flexbox:

  https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  See if works for you!

  0