Responsive QR Code but the transition from mobile to web is noticeable

Personal opinion - you might have overcooked it with that query that you don't really need. The QR container stays at the same size both on desktop and mobile, at least according to the screenshots provided in the starter. Not sure if I'm allowed to post the exact dimensions (figured out by error and trial).

Footer's centering seems fine, could switch from fixed to absolute (since there aren't several screens worth of height in content, wouldn't look drastically different). For the QR container you can also go the position route, adding a transform:translate. Was about to suggest flex on body, but you do have a footer. Would require a second wrapper for the .qr-code div and using the flex on it, so it alone gets affected.

You can't really make it smooth, but you do not have to as you will always be handed the "version" that suits the width of your device. Some browsers smoothen it out, but it is just for aesthetics.