Forms cut off when on mobile

时间:2020-04-15 作者:JFarq

信用卡处理器生成的表单通过javascript加载。正常加载时,可以看到模板工作良好here, 但是移动用户看到下面的内容,无法滚动。据说表单有一个移动版本,但显然无法加载?form

使用以下方法将表单加载到页面上:

<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>
我怀疑网站的主题与表单之间存在某种互动,并导致了问题,但我不确定如何1)诊断该问题2)在不剥离整个网站的CSS的情况下进行补救。

1 个回复
最合适的回答,由SO网友:Tony Djukic 整理而成

这是一个Blackbaud表单,我通常会遇到一些麻烦,因为他们在移动设备上工作,并且设计得恰到好处。很高兴看到他们至少已经不再使用iFrame了。

无论如何,当我检查开发人员工具时,有一个元素ID为#bbox-root.

该元素的CSS的宽度声明为660px. 因此,这迫使它比iPhone的实际屏幕大414px320px 这样一来,屏幕上就会有一半的内容消失了。

看起来您位于SiteGround,样式规则位于以下文件中:https://givesaintagnes.org/wp-content/uploads/siteground-optimizer-assets/siteground-optimizer-combined-styles-cb7027cddb8bea4cb7f4e68f2840e46a.min.css

因此,基本上,假设您无法实际编辑该文件,因为它是通过优化器插件生成的,那么您需要在CSS中找到该行并对其进行编辑。假设指定660px是有原因的,我建议如下:

#bbox-root{
     width:100%;
     max-width:660px;
}
这将确保元素仅在较小屏幕上100%命中,而在较大屏幕上,将宽度限制为660px。

此外,您还必须编写一系列其他CSS规则,以解决容器中的其他元素如何因容器较小而被压缩和错位的问题。

在开发人员控制台中,我测试了我的解决方案:The CSS fix.

下面是它的样子:The end result.

相关推荐

将序号添加到GravityForms窗体

我有多种表格。基于这些表单,我需要一个用前缀和序列号填充的隐藏字段。每个表单都有一个隐藏字段。该字段可以动态填充,参数为“uuid”。我有以下代码。。。对如何更改以下代码有何建议?这个代码段可以工作,但它使用了一个随机数(mt\\u rand),我更喜欢[prefix]-00001,[prefix]-00002,等等。此外,如果每个表单都有自己的前缀,那就更好了。但这超出了我的php技能。对于每种形式,最好是顺序的,例如:Form A 前缀为“prd”([前缀]-00001)prd-00001Form B