Non-responsive content issue

I played around with the theme and found that I can manage to view all of the iframed, non-responsive content if I activate the scroll bar option.

The problem appears to stem from the parent site being responsive and some iframed sites being non-responsive.

The dillema is that if I activate the scroll bar, it looks ugly.

If I deactivate the scroll bar, it is impossible to view all of the iframed content on mobile phones.

but how should the content be displayed on a mobile phone if there is not enough space and without having a scrollbar?

You know, mobile phone users can resize the content with two fingers.

What I am having trouble is that I cannot resize the iframed content on mobile devices unless I use a scrollbar.

If I use a scrollbar, it looks ugly with iframed responsive pages which do not require a scrollbar.

Do you use the workaround or is everything on one domain?
Because the workaround has an overflow:hidden for the iframe content as well.

Yes, everything is on one domain.

o.k. – the only solution I could think right now is to make a detection for mobile devices that the scrollbar is available – otherwise not.
Could also be made by css for newer browsers.

Problem is that not all browsers do css3 properly.

Thanks for your advice.

For now, I chose the option of “Resize iframe to content height” and set the height to “10,000px” so that the scroll bar is not displayed in most of the cases on big screens.

The above setting also allows mobile users to use their two fingers to scroll.

So should I stick to my tweak or do you believe I should stick to your suggestion?

I am new to CSS, so i believe I will need to do some googling to figure out the detection on mobile devices.

By the way, I have a major problem as to forcing iFrame content displayed on its wordpress parent page.

As you may be aware I have iframed several of my subsites. (You can have a look at https://www.koreaobserver.com)

Now I want people directly accessing to my subsites through google or other search engines automatically redirected to the parent site where the corresponding subsites are shown in an iframe.

There is a wordpress plugin called “force-frame,” which “allows you to force your WordPress website inside an iframe in another website, with cross-domain support.”

The plugin is supposed to do what I desire if it works. Nevertheless, i don’t understand the plugin’s installation instruction, which says “Add the following snippet inside the HTML of the parent.”

HTML of the parent? I have no clue as to the html of the parent.

Do you have any suggestion on that?

Also as for the browser compatibility of the CSS3, I think it all comes down whether mobile browsers support it.

I guess I need to do some research, but I have a gut feeling that mobile devices, which have embraced the latest modern technology, are more likely to come with browsers compatible with CSS3.

If you use
Resize iframe to content height
the height should not matter because it is resized to the needed height!

to your 2nd thing. Normally thisi s only a very small Javascript snipplet you need to add. the parent is the html your iframe is included.

About css 3. I will change the plugin that if scrolling is set to auto nothing is rendered to the iframe anymore so that scrolling is default.
and then by adding css which can be done by adding a css file almost at the bottom yu could e.g. set with css at which width scrollbars should be used.
but if the resize to heigt works fine stick to it.

Thank you for your prompt reply, once again.

You mentioned “the parent is the html your iframe is included.”

Well, the parent site is based on wordpress. Does wordpress sites have a html?

I only see index.php on the parent site.

sure – go to the theme editor and there you see all “html”. You should insert into something that is included everywhere.

Thank you for your reply. But I am running a multisite and thus the parent page is the master site. Nevertheless, I cannot find the theme editor and I believe it is hidden on multisites.

If there is no

Appearance -> Editor

Than it is hidden or somewhere else…