Forms cut off when on mobile

Question

A form, which is generated by a credit card processor is loaded via javascript. The form works fine when loaded normally can be seen here, but mobile users see the below and are unable to scroll. Supposedly the form has a mobile version but that is apparently failing to load?

The form is loaded onto the page using:

<div id="bbox-root"></div>
<script type="text/javascript">
       window.bboxInit = function () {
           bbox.showForm('313b-e4b8cefad90c');
       };
       (function () {
           var e = document.createElement('script'); e.async = true;
           e.src = 'https://bbox.blackbaudhosting.com/webforms/bbox-min.js';
           document.getElementsByTagName('head')[0].appendChild(e);
       } ());
</script>

I suspect that the theme of the site is somehow interacting with the form and causing the issue, but I'm not sure how to 1)diagnose that issue 2)remedy it without just stripping the CSS for the whole site.

Answer 1

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: