-
Posts
-
Hi,
I’m embedding our own solar panel calculator in an Enfold themed WordPress page: http://comparemysolar.com/uk/ but it’s not behaving as I want on a portrait orientated iPad screen.
I tried two options: 1) implement the iframe with the Advanced Iframe Pro plugin and 2) by just adding iframe html code. Both options look great on a desktop, but as soon as I check it on an iPad it only looks good in landscape mode, because the portrait mode is too narrow and about one quarter of the iframe falls off.
I’m embedding the same iframe on another page as well where it does show correct, also on a portrait iPad: http://stefanruiter.nl/zonnepanelen/. As you can see it zooms out a bit and shows the entire page.
What am I doing wrong here?
I discoverd that by disabling the responsiveness of the theme, the iframe does get displayed properly. Disabling the responsiveness is not something I’m after though. It removes
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">from the header. I would still love to see a solution where the iframe is displayed correctly and I keep the responsiveness.Hey!
the second page is not an Enfold one.
I tried to adjust the width of some the iFrame parts, but it doesn’t work for me. It’s not reacting to any CSS. Maybe you have more luck when you implement this code in your Quick CSS field:.block220 { width: 85%; }Normally the width will shrink to 85% with this code, but it does not happen for the iFrame. So I would suggest to contact the developer for this iFrame to get some support.
Cheers!
AndyAndy, thanks for your reply. True, the second link is not an enfold theme, but is merely there to show how the iframe content scales properly when embedded in an iframe out of the theme.
I still don’t have a solution for the problem, as the content of the iframe does not scale with the width of the iframe. The calculator is made by ourselved and it has a fixed width of 919px, basically I would like to find a way to ‘zoom’ the content of the iframe to the correct dimensions. The iframe content does scale properly if I switch off the responsiveness of the website, but I do not want to loose that.
A solution would be much appreciated.
Stefan
Hey!
Not really sure what we could do here. If you change the width of the iframe then it’s going to either have a horizontal scroll bar or the contents will stack on top of each other.
If you remove the meta tag then you can “zoom out” on the ipad which will make it so you can view all of the iframe but then the text will be very small from zooming out.
You could “scale” the iframe with the following CSS.
#advanced_iframe_31 { transform: scale(0.5) !important; }Or use 1.5 if you want to increase it’s “zoom level”.
#advanced_iframe_31 { transform: scale(1.5) !important; }But that is the same problem as with the meta tag. The content will be smaller and harder to read.
Cheers!
Elliott
- You must be logged in to reply to this topic.