So I built this Wordpress page using WPBakery page builder and added a Pardot form to it. On certain browser sizes the form - which looks like it is an iframe element - is larger than the container it's in, so it adds scrollbars to compensate. Is there a recommended solution to keep this from happening? See attached image:
If you're not entirely sure if the form is an iframe element, you could try targeting the form's fields using CSS and using dynamic width and height values such as width: 100%; instead of something like width: 250px;, which will automatically resize your elements to fit the available width. This will take care of the horizontal scrollbar.
For the vertical scrollbar, you could try targeting the scrollbar with psuedo properties to manipulate it's style or hide it altogether. You can read more about it here:
https://css-tricks.com/almanac/properties/s/scrollbar/
It's worth noting though, that this approach isn't highly recommended, due to it's limited support across different browsers and platforms.
However, in the case of this specific vertical scrollbar, it appears to be a height or padding issue on the form's container, so you could target that with @media queries to make it more responsive across devices.
I hope this helps!
