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?
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?
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.
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.
I emailed Jonathan at SeyDesign for support since I am using his Aptenon theme and this is his reply:
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:
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.
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.
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!