That’s a Blackbaud form and I’ve generally had a bit of trouble with them working on mobile and getting styled just right. Glad to see they’ve moved away from using iFrames at least.
Anyway, when I check the developer tools there is an element ID’d as #bbox-root.
The CSS for that element has a width declaration of 660px. So it’s forcing it to be larger than an actual iPhone screen of 414px or 320px which then puts about half of it off screen.
Looks like you’re on SiteGround and the style rule is located in this file:
https://givesaintagnes.org/wp-content/uploads/siteground-optimizer-assets/siteground-optimizer-combined-styles-cb7027cddb8bea4cb7f4e68f2840e46a.min.css
So basically, assuming you can’t actually edit that file as it’s generated via their Optimizer plugin, you’ll need to find that line in your CSS and edit it. I’d recommend, assuming the 660px was specified for a reason, the following:
#bbox-root{
width:100%;
max-width:660px;
}
That’ll make sure the element only hits 100% on smaller screens and on larger screens will constrain the width to 660px.
Additionally you’re going to have to write a series of other CSS rules to address how the other elements within that container are getting compressed and misplaced because of the smaller container size.
Here’s where, in the developer console, I tested my solution:
And here’s what it looks like:
