WordPress - 如何阻止WPBakery构建页面上的Pardot表单在某些浏览器尺寸上添加滚动条?



所以我使用WPBakery页面构建器构建了这个Wordpress页面,并向其中添加了一个Pardot表单。在某些浏览器尺寸上,表单(看起来像是 iframe 元素(大于它所在的容器,因此它会添加滚动条进行补偿。是否有推荐的解决方案来防止这种情况发生?见附图:

Pardot 窗体强制滚动条的图片

如果您不完全确定表单是否是 iframe 元素,您可以尝试使用 CSS 并使用动态宽度和高度值(如width: 100%;(来定位表单的字段,而不是像width: 250px;这样的东西,这将自动调整元素的大小以适应可用宽度。这将处理水平滚动条。

对于垂直滚动条,您可以尝试使用伪属性定位滚动条以操纵其样式或完全隐藏它。您可以在此处阅读有关它的更多信息:

https://css-tricks.com/almanac/properties/s/scrollbar/

值得注意的是,这种方法并不强烈推荐,因为它对不同浏览器和平台的支持有限。

但是,对于此特定的垂直滚动条,它似乎是表单容器上的高度或填充问题,因此您可以使用@media查询来定位它,以使其跨设备响应更快。

我希望这有帮助!

你能做的最好的事情就是在Pardot中创建自定义CSS(在Pardot中(,以适应更小的屏幕尺寸。

最大的问题是屏幕大小iframe取决于它,而不是它嵌入的实际浏览器窗口宽度。

因此,如果您将iframe放入桌面上 600px 宽的容器中,那将是 Pardot 中@media (min-width: 600px)的媒体查询。需要调整容器大小的媒体查询。

如果你无法访问Pardot的CSS工具,那么你就不走运了。

最新更新