Margin of auto for the wrapper to center it

Hi 👋

Great work with this component.

I can make a few comments regarding responsivity. I'd recommend changing the way you're thinking about defining the width in the desktop view. From what I understand you're deciding on how you want the component to look at full width, which is approximately 15vw.

The problem with this is that at smaller viewports (approx width: 450px) the component ends up with a width of around 100px which really is too small.

You'd be better to use a much wider width for the component, let's say 90% and then add a max-width with a fixed-value for the larger screen size. That way you'll have a more appropriate width across a range of viewport widths.

.qrwrapper {
    width: 90%;
    max-width: 300px;
}

Thanks