Wordpress - Как я могу остановить форму Pardot на странице, созданной WPBakery, от добавления полос прокрутки для браузеров определенного размера?

Question

Итак, я создал эту страницу Wordpress с помощью компоновщика страниц WPBakery и добавил к ней форму Pardot. При определенных размерах браузера форма, которая выглядит как элемент iframe, больше, чем контейнер, в котором она находится, поэтому она добавляет полосы прокрутки для компенсации. Есть ли рекомендуемое решение, чтобы этого не случилось? См. Прикрепленное изображение:

Изображение форсированных полос прокрутки в форме Пардо

Answer 1

Лучшее, что вы можете сделать, это в Pardot создать пользовательский CSS - в Pardot - для размещения экрана меньшего размера.

Самая большая проблема заключается в том, что размер экрана зависит от iframe и не фактическая ширина окна браузера, в которую он встроен.

Так что, если вы поместите iframe в контейнер шириной 600 пикселей на рабочем столе, это будет медиа-запрос @media (min-width: 600px) в Pardot. Вам необходимо настроить медиазапрос для размера контейнера.

Если у вас нет доступа к инструментам Pardot CSS, вам в основном не повезло.

Answer 2

Если вы не совсем уверены, является ли форма элементом iframe, вы можете попробовать настроить таргетинг на поля формы, используя CSS и используя динамические c значения ширины и высоты, такие как width: 100%; вместо чего-то вроде width: 250px;, который автоматически изменит размеры ваших элементов в соответствии с доступной шириной. Это позаботится о горизонтальной полосе прокрутки.

Для вертикальной полосы прокрутки вы можете попробовать нацелить полосу прокрутки с помощью свойств psuedo, чтобы манипулировать ее стилем или полностью скрыть ее. Вы можете прочитать больше об этом здесь:

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

Стоит отметить, однако, что этот подход крайне не рекомендуется, так как он ограничен в разных браузеры и платформы.

Однако, в случае этой указанной c вертикальной полосы прокрутки, это, похоже, проблема высоты или заполнения в контейнере формы, так что вы можете нацелить это с помощью @media запросов, чтобы сделать он более отзывчив на всех устройствах.

Надеюсь, это поможет!