Hello

I’m using the Popup maker to show the ARI Quiz form. Unfortunately popup maker can’t display this quiz form directly by using its short code, so I was advised to add the short code into a page then embed the page into a popup using iframe.

Now the problem is after opening the popup on a mobile device, the embedded page isn’t responsive to mobile size, however the popup it self is responsive. So the page opened in the popup is bigger than popup. I have contacted the popup maker, but unfortunately they couldn’t help me and suggested to ask you guys for advice.

I think the solution to my problem is the iframe with custom CSS, but I don’t know what I am doing wrong.

englishseed.com/second-course/

Here is the iframe code I’m using:
<div class="quiz-container">
<iframe class="quiz-frame" src="englishseed.com/second-course/frontpage_quiz/" width="600" height="550" frameborder="0" allowfullscreen="" >
</iframe> </div>

And here is the CSS:
.quiz-container {
position: relative;
padding-bottom: 90%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.quiz-frame iframe {
position: absolute;
top:0;
left: 0;

width: 100%;
height: 100%;
}

Could you please kindly advice me how to solve this problem. This has taken so much of my time.

thanks in advance
Alen

Hello,

The quizzes created by the plugin are fully responsive. This problem with popup and IFRAME styles. You need something like this for <IFRAME>:



because currently fixed width (600px) is used for all screen resolutions. The solution above requires support by popup plugin. You can contact popup maker support and ask how to create flexible content area.

Regards,
ARI Soft