-
Posts
-
Hi, I’ve got a couple of questions concerning iframes. Firstly, I’d like to be able to remove the left and right arrows that pop up like it’s a gallery lightbox, and secondly, is there a way to make the iframe load properly on mobiles? On an Iphone it works fine, the iframe loads and is a decent proportion of the screen, but on android phones (the two that I’ve tried) it loads at a very small height and isn’t usable.
I’ve linked to my website in the private content box – please find a link to an iframe in my footer titled ‘How Do I Book?’.
It goes without saying that this is an incredible theme, and I thank you dearly for any support you can offer! Really fantastic stuff…
Hi electricstrange!
Those arrows should not be displaying like that for iframe content in the magnific popup. Let’s try the following.
1. Deactivate all plugins.
2. Completely delete Enfold from your WordPress theme directory before downloading + uploading a fresh copy from themeforest.
Also, I checked on the Nexus 7 which is an Android tablet but the iframe is loading the same as it does on desktops. What mobile browser are you using?
Cheers!
ElliottHi Elliot,
Thanks for getting back to me – much appreciated. I deactivated all plugins and re-installed a completely fresh Enfold after deleting it, but unfortunately the arrows still show up. They don’t pop up on all iframe windows, just some, weirdly. Is there anything else I can try?
I thought the mobile problem would be an easy fix as I do use a custom browser (chrome) but it actually does the same thing in the default browser. Now that I look at it again it looks like it might be the same proportions as you get on a desktop, but obviously in mobile size this means the height is really small. For some reason the height is much better on an iphone though.
Hope you can still help :)
Hi!
1. When you create the iconbox try setting the link to only the icon or the title and not both.
2. Chrome is the official browser for Android and the recommended one to use. I checked on my Nexus 7 but it looks fine to me. Take a screenshot of what your seeing so we can get a better idea.
Cheers!
ElliottHi Elliot,
That’s fixed the arrow problem, thanks so much. I can honestly say I spent about 8 hours trying to sort that as I didn’t want to bother you guys on here – you did it a bit quicker! :)
Here’s a shot of the iframe mobile height problem: http://tinyurl.com/lxwsr9y
On an iphone there is the same margin at the top and bottom as there is on the left and right I believe, so the iframe pretty much fills the screen. I tried it on my brothers Android phone yesterday, just to check another phone, and it has the small window though. I personally have a Samsung S3 if it’s any help.
Cheers Elliot,
Dan
Hey!
Oh I see what you mean. I’m not sure if this CSS is going to work because it’s probably going to be changed with the script but you can try it.
@media only screen and (max-width: 479px) { .mfp-iframe-scaler { padding-top: 80% !important; } }You might be able to view more in the landscape orientation.
Regards,
ElliottActually that seems to have helped! I changed it to 100% just to get a bit more headspace, because it’s still not filling the screen, but it’s definitely workable! Hopefully that change in value won’t effect it negatively. I’ll also double-check on an iphone to make sure it’s not gone out of line on there or anything, but all looks good!
Thanks Elliot – you’re an absolute star!
- The topic ‘Iframe Arrows’ is closed to new replies.