HTML and CSS

One thing I'd recommend is changing the unit you're using for your QR container. As it stands you are using a percentage based width that is relative to the parent (body element) container. But when the viewport is resized the body element's width resizes with it, causing the width of the QR container to also change. This causes the text inside the QR container to wrap and increase its height. Try using rem for the width to avoid this while also having your component scale with the font size whenever the user changes it in their browser settings.

If you want to use different styles depending on device/width, you can use CSS Media Queries.

Here's a resource that can help you: https://www.w3schools.com/css/css3_mediaqueries.asp