QR-Code-Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello again Jerry, congratulations for solution!

  Here's my tips to improve the QR CODE image responsiveness and the container:

  Replace width: 260px; with max-width: 260px;

  .container {
      max-width: 260px;
      height: 430px;
      padding: 15px 15px 20px;
      background-color: hsl(0, 0%, 100%);
      border-radius: 10px;
  }
  

  The main difference between width and max-width is that the first property is fixed and the second is flexible, for example, a component with width: 260px will not grow or contract because the size will be ever the same, but a container with max-width: 260px or min-width: 260px can grow or contract depending of the property you've set for the container.

  To make the qrcode image responsive and respect the container size use display: blockand max-width: 100%

  img {
      display: block;
      max-width: 100%;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0