Basic QR-Code Card template using HTML and CSS

Community feedback

• 

  Antoine C•1,240

  @mattari97

  Posted almost 3 years ago

  Hi Vanshul. Nice design. Congrats on completing the challenge.

  Like imad said you just need to use a fixed max-width for you qr-container.

  You'll also need to set the property width: 100% so the element always takes the maximum space available. This way you do not need any media query anymore.

  Example:

  .qr-container {
    width: 100%;
    max-width: 18.75rem;  /* 300px */
  }
  

  Then i would add some padding on the parent container so the qr-container does not stick to the sides of the window on small screen.

  Example:

  .container {
    background-color: hsl(212, 45%, 89%);
    width: 100%;
    /* height: 100%; */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  
    padding: 2rem;
  }
  

  Again nice job and happy coding. Peace

  10
• 

  imad•3,330

  @imadvv

  Posted almost 3 years ago

  Greeting Vanshul Bhatia!! Congratulations on completing Your challenge!, 👏👏👏 well done.

  to solve that issue, just replace width:80% to some more specific width, like max-width: 20rem;.

  example fix .

    @media only screen and (max-width: 768px)
  .qr-container {
    /*  width: 80%; */
    max-width: 20rem;
  }
  

  Hope this help!!

  over all, Happy Codding, and keep up the Good work

  10