Making the iframe responsive?

[bryan-snyder]

Hey -
so tried using this in a sidebar widget in the 2016 WP Theme, no custom CSS, no other login plug-ins and no captcha plug-ins. The width of .panel-content is set to 400px causing the wave graphic to become hidden overflow and therefore unreadable by phones.

We tried overwriting the CSS via child theme style.css. Then we realized this has some react going and there's css coming into the iframe from clef.io which we can't edit, obviously.

after reviewing the iframe src and unminifiying the iframe's page source we could locate .panel-content.

in Dev-Tools, we are able to achieve the desired responsiveness by adjusting .panel-content from this:
.panel-content { position: relative; z-index: 100; overflow: hidden; width: 400px; margin-top: -50px; padding-top: 50px; }

to this:
.panel-content { position: relative; z-index: 100; overflow: hidden; width: 400px; margin-top: -50px; padding-top: 50px; margin-left: -50px; }

So maybe in the next release we can see the ability to set parameters in the shortcode, such as width, height or the ability to add a custom class.

Also, if the width were set as a % and not a static px amount it would help in the iframe's responsiveness.

Thank you or... correct us where I'm mistaken.

Otherwise, love this plug-in and hopefully more sites adopt.
Bryan and Ben

[bryan-snyder]

would like to point out, however... using the button on the sidebar and allowing the full screen modal to go up is a great experience.

[jessepollak]

Thanks for opening this issue, we'll take a look!