If your embedded donation form is not appearing correctly on mobile/cell phone screens, and the user has to turn their phone to show a landscape version, this is to do with the screen width.
But you may also want to change the size of the form to fit your website. You can do this for height or width
β
For the embedded form code snippet : Change the text shown in bold below from width="700"
<iframe src="https://your website url/donate-widget/1?isDescriptionTextShown=true&methods=stripe%2Cdaf%2Cstocks%2Ccrypto&isTitleShown=true&accentPrimary=%232D89C8&accentSecondary=%23E6F1F9&increments=40%2C100%2C200&descriptions=%2C%2C" width="700" height="900" style="border: 0px;"></iframe>
to
width="100%"
so the code looks like this:
<iframe src="https://your website url/donate-widget/1?isDescriptionTextShown=true&methods=stripe%2Cdaf%2Cstocks%2Ccrypto&isTitleShown=true&accentPrimary=%232D89C8&accentSecondary=%23E6F1F9&increments=40%2C100%2C200&descriptions=%2C%2C" width="100%" height="900" style="border: 0px;"></iframe>
That should then make phone views work well.
You can of course change the height and width to whatever parameters suit your website best.
β
For example, you can use height="auto" to make the form responsive to your page.
β
<iframe src="https://your website url/donate-widget/1?isDescriptionTextShown=true&methods=stripe%2Cdaf%2Cstocks%2Ccrypto&isTitleShown=true&accentPrimary=%232D89C8&accentSecondary=%23E6F1F9&increments=40%2C100%2C200&descriptions=%2C%2C" width="100%" height="auto" style="border: 0px;"></iframe>
or indeed the same for width.
β
It is so easy to change the parameters, we suggest you try different parameters to see what works best for your site. It's so easy to change it back if it does not work.
IFrame Resizer:
For those teams with a more technical team, the iFrame resizer found here is evidently a route that can be used to size the Donation Form. Note: this service is not affiliated with Better Giving.