Graphic user interface design: How can I preview a document together with a form in a responsive way?

My registration form requires the user to enter Information A Y Information b , which are printed on documents to which they only have access.

How do I have to do the form? sensitive For all kinds of devices, whether ultra-panoramic screens or smartphones, I want my preview to skip below my form. Also, I want my preview card to always be the same height as the card on my form.

But the main problem is how to preview the document. The preview is just an image that is being exchanged, depending on the input the user has currently focused on. Information A is printed on the top of the document, and Information b It prints near the bottom. Now, on wider screens, the letters also get wider. I have to scale the image or cut it out. Neither is really an option, since the scale is too small to be legible, and the cut is cut Information b.


I saw the question "How to better show a preview of a document".

What would be a good way to design a receptive preview of these documents?