Help! Donation Code Displays Weird on Mobile

Hello! So I've got an html code block on the donation page, which loads slowly, but works on desktops & tablets. However, on mobile (at least android, have not been able to test iphone) the block displays WAYY to the right of the rest of the page. When it loads, I have to scroll down and then way to the right to see the donation interface. My coding skills are very limited, but I cannot find in the existing code why it's displaying this way or where one might fix it. Anybody got any suggestions to get it to display in the same scrolling column as the rest of the page?

HTML is currently:

<iframe src="https://MIurl.cc/laoAzoMmI"
frameborder=0 style="width: 1200px; height: 1400px; border: 0;">

My first guess is that the problem is with the property in the iframe that makes the width:1200px; which is far wider than any mobile screen.

The solution for this is not straightforward as iframes only load the website within the iframe making controlling the view difficult. I would try adding max-width:100%; to the style so at least it doesn't load far too wide.

16 minutes ago, Ziggy said:

My first guess is that the problem is with the property in the iframe that makes the width:1200px; which is far wider than any mobile screen.

The solution for this is not straightforward as iframes only load the website within the iframe making controlling the view difficult. I would try adding max-width:100%; to the style so at least it doesn't load far too wide.

The way you explain the problem with iframe makes total sense. I tried adding max-width:100% and it did make it narrow-er. However now it's too narrow. (Screenshot attached)

That's an odd result. iFrames are so problematic!

Can you share this page URL so I can have a look?

Actually, just try this tweak to the iFrame code:

<iframe src="https://MIurl.cc/laoAzoMmI" frameborder=0 style="width: 100%; height: 1400px; border: 0;"></iframe>