QR-Code-Component

👾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!