所以我使用 WPBakery 页面构建器构建了这个 Wordpress 页面，并在其中添加了一个 Pardot 表单。在某些浏览器尺寸上，表单（看起来像是一个 iframe 元素）比它所在的容器大，因此它添加了滚动条来进行补偿。是否有推荐的解决方案来防止这种情况发生？见附图：
问问题
426 次
2 回答
0
您可以做的最好的事情是在 Pardot 中创建自定义 CSS - 在 Pardot 中 - 以适应较小的屏幕尺寸。
最大的问题是屏幕大小iframe取决于它嵌入的实际浏览器窗口宽度，而不是实际的浏览器窗口宽度。
因此，如果您将其iframe放入桌面上 600 像素宽的容器中，那将是@media (min-width: 600px)Pardot 中的媒体查询。您需要针对容器大小调整媒体查询。
如果您无法访问 Pardot 的 CSS 工具，那么您很不走运。
于 2020-01-16T17:33:31.100 回答
0
如果您不完全确定表单是否是 iframe 元素，您可以尝试使用 CSS 定位表单的字段并使用动态宽度和高度值（例如，width: 100%;而不是类似的值width: 250px;），它会自动调整元素大小以适应可用宽度。这将处理水平滚动条。
对于垂直滚动条，您可以尝试使用伪属性定位滚动条来操纵它的样式或完全隐藏它。你可以在这里读更多关于它的内容：
https://css-tricks.com/almanac/properties/s/scrollbar/
值得注意的是，这种方法并不被强烈推荐，因为它对不同浏览器和平台的支持有限。
但是，在这个特定的垂直滚动条的情况下，它似乎是表单容器上的高度或填充问题，因此您可以使用@media查询来定位它，以使其跨设备响应更快。
我希望这有帮助！
于 2020-01-16T17:00:59.747 回答