iframe wrapping

Dear Gavick,

Could you advise on how i could optimise the iframe on my site for mobile? Would i use iframe wrapping as shown in your demo? If so how would i do this ?

my iframe looks fine on desktop but is too big for mobile.

any help would be greatly appreciated.

kind regards,
lee

Hi,
iframe was never designed to be mobile friendly, this is solution from 90's

but you can add style for iframe here:
templates/gk_magazine\css\mobile.css
for example max-width etc.

thanks for the reply.

do you know what the css would look like? im no good at these matters

the iframe code looks like:

<iframe onload="window.scroll(0,0);" src="http:/example/ name="qz" id="qz_iframe" scrolling="no" frameborder="0" width="800" height="1200"></iframe>

but no idea what the css would look like for the mobile.css

As you see you have change value width and height.
but by default you can not use % - iframe don't support
so you have to delete

Code: Select all

width="800" height="1200"

and set those values in % or different px in override.css and mobile.css

The problem is I don't know though I kind of get what you are saying, I dont know what I am doing. I don't know any css and searching for the information is not getting me anywhere.

Could I ask:

Will what your suggesting work if the iframe is hosted/sourced on another website?
Is thing something you could fix for me (change the iframe width/hight and add the relevant CSS)?

Clearly the objective is just to get the iframe optimised for both PC and mobile.

for override.css it seems to work and load full page without needing hight and width in the iframe.

however, I added this to mobile.css (and cleared cache) but the iframe still loads full page size so doesnt seem to be doing anything for mobile:

iframe {
height:480px!important;
width:320px!important;
}

have a missed something or doing something wrong?

ta,

You can also grab another source using php not only iframe,
it depends what you need.

I have found those solutions, check them:
1) http://rev.iew.me/help-moving-from-iframes
2) https://coderwall.com/p/c-aqqw

Second problem, iframe request lots of time to load another web site, are you sure that you want to load it on mobile devices?

Third, you can use max-width property.

I guess i have two problems, the first being i think i am definately stuck with using an iframe, because i am an affiliate and its given to me by the affiliate network and its the only way the affiliate form will load with the tracking tag is to use their iframe as is, i guess i can change the width and night that's it.

my second problem is i have no idea what code i need to add to the mobile.css to get the ifame so you can fill out the form on mobile.

we all know mobile is a huge market and if i cant get the affiliate form to load at the right size on mobile then i don't have much hope making sales.

do you know exactly what code i should add and where?

or is this something you would be able to implement for me if i purchase VIP?

kind regards

VIP - is also not for customization anyway.
But we (moderators) can do some custom jobs for extra money.

As I told you right now is not possible to change it for smartphones because of source for <iframe>
I suggested to inform users to use tablet , laptop, desktop only to fill the form.