On a laptop or large screen the following iFrame page displays properly:
http://mcintirebotanicalgarden.org/iframe/
However when viewed on a mobile the display is not correct. The native page on the city website that I am pulling in via an iFrame page is designed to be mobile-friendly and displays properly on a mobile device:
http://www.charlottesville.org/Index.aspx?page=3089
Can someone please explain to me what is happening with the iFrame page and what is causing the distortion?
Jody
The only difference I can see is that on the first page the map displays with the 2 parts side-by-side and in the second it displays with the parts one above the other. The latter makes more sense because you can’t view both halves of the map without scrolling horizontally on the average mobile phone. Having said that, neither page is exactly ideal because the labelling on the first part runs from bottom to top instead of left to right. In addition, neither page is responsive. Also, they don’t seem to have been created in RapidWeaver, so why are you asking here?
Peter, of course my site was built with RW:
Home page:
[http://mcintirebotanicalgarden.org][1]
The page in question is the City Park Planning page I’m pulling in from the City’s own website. Their site is (supposedly) created to be responsive, and the SeyDesign theme I’m using - Aptenon - is a responsive theme. So the issue is what is clashing with what when I pull it in via the RW iFrame page built-in.
The RW page from my site that is iFrame that I"m using to pull in the City page:
[http://mcintirebotanicalgarden.org/iframe/][2]
The actual City page on their website that I’m pulling in:
http://www.charlottesville.org/Index.aspx?page=3089
I don’t know whether it is on the RW side, the City side, or just where the problem lies. Just to clarify, the City website was not created in RW, just my site.
[1]: http://mcintirebotanicalgarden.org
[2]: http://mcintirebotanicalgarden.org/iframe/
Looks like you are looking at the actual City page, not my page with the iFrame. Are you getting distortion when you view this?
http://mcintirebotanicalgarden.org/iframe/
That’s what I was looking at.
Peter, could you check it in Safari? Maybe different browsers are an issue.
I’m afraid not. I have an Android phone.
I think, the problem is, the website in iframe is not responsiv.
and the iframe is too width, 1200px.
On the computer screen, there is a display error (screenshot 3)
Try to use this code in CSS of the page. Perhaps this helps.
img,iframe { max-width: 100%; }
or set in the iFrame Settings 100 Percent.
Oscar, when I set the iFrame Settings width to 100 % as in your example, the page does not show up at all in the drop-down menu under Resources. It just isn’t there. I then set the width back to 1200 pixels and put your code in the Inspector/CSS settings with the same result, the City Planning page does not show up.
New link to test project:
http://livingmind.com/MBGtest/
I emailed Jonathan at SeyDesign for support since I am using his Aptenon theme and this is his reply:
Hi Jody,
iframes typically have a specific width applied to them, which overrides any responsive styling. It’s possible to make an iframe responsive, but takes some finagling and you’ll need to be able to modify the source code of the iframe itself.
As such, you’ll probably want to switch to a pure HTML page, a Stack page using a HTML stack, or a Styled Text page using the “Ignore Formatting” option applied to HTML code.
Here’s some info on making iframe responsive, which I found after a quick search online:
Best,
Jonathan
I read the link he provided, but it’s a bit daunting for me since I don’t code and I will have to try and follow his steps closely to make sure I understand the instructions and there are some bits I’m unsure of.
Thanks for your help, I appreciate it.
Jody
@Jody
What I have seen, is this.
The page in the iframe by Ben Marshall (link) is a responsive page!
This is easy to install with iframe.
You can not make in a iframe a non-responsive page to a responsive page.
For me the code on the official site of Ben Marshall was not working.
Put in your page this code (in a Styled Text page or html), perhaps this works for you.
<iframe src =" http://www.your_site.ch "width =" 100% "height =" 800 "> </ iframe>
But a non-responsive page can not be made responsive, in a iframe 
Excuse my English, I am German-speaking Swiss
@Jody
For me, there is the same display errors. Not on the computer, only on the iPad. The problem probably lies in the imported page.
Look here!
I’ve seen on the iPad and in RapidWeaver (when you set to Landscape) following:
There is a mobile version. This is displayed incorrectly.
If you switch to the full site on the iPad, the presentation is correct!
Now I do not know how to address this full page directly. Unfortunately. There is a javascript activ.
This can not be real, because the page is there, no matter the width. Must be displayed in the navigation.
For me it is no problem, everything is there in my test pages.
