If you have an iframe with fixed dimensions, then the iframe will be displayed at those dimensions in all browsers and on all devices.

You could certainly try using percentage dimensions for your iframe (as penum suggests above) but if the iframe is nested within any parent containers with fixed dimensions, then the iframe's own dimensions will become fixed, e.g. 100% x 800px = 800px.

You might like to take a look at this forum thread, entitled "How to get an IFrame to be responsive in iOS Safari?". Although you have a Windows mobile device, the principles will be the same and it might help with your problem. http://stackoverflow.com/questions/2308 … ios-safari

Another thing you might like to try is to use JavaScript to listen for a change in the user's browser window size and then assign new dimensions to your iframe accordingly.
There are examples of this technique in the Using a Resizable Gallery with a Header support section. In the online examples, JavaScript is used to dynamically set the gallery's dimensions. You could copy and modify the code as required to set your iframe's dimensions instead.

Also, as you have already uploaded your complete gallery folder to your web server, you might like to consider embedding your gallery directly on your page (using the baseUrl method as documented here) rather than using an iframe.
You could replace your iframe code with something like the following:

<!--START JUICEBOX EMBED-->
<script src="/gallery/welcome/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl: '/gallery/welcome/',
    containerId : 'juicebox-container',
    galleryWidth : '100%',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Just doing this and setting your gallery's width to 100% (so that it fills the width of its parent container), might be enough to solve your problem.

I'm glad to hear that using larger images has solved your problem.
Thanks for letting me know.

@penum

Many thanks for checking and posting your findings.
I have notified the developers. (Unfortunately, I do not have a solutions or workaround at the moment.)

Please see this FAQ which may help:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

Looking at your gallery, it looks like you could solve your problem by using larger images in your gallery.

The first image in your gallery is only 430 x 438 and your gallery does not explicitly set a value for imageScaleMode so the default value of SCALE_DOWN is used. This does not scale up small images.

You could either use larger image in your gallery or set imageScaleMode="SCALE" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) so that your images are scaled up to fit better within the gallery's image area.

Please note that when scaling up images, their visual quality may decrease so perhaps the better of these two solutions would be to use larger source images in your gallery.

I've tried clicking your link (above) in Chrome and Mobile Safari on an iPod Touch 4 running iOS 6.1.6 and the everything looks OK (the caption overlay is displayed and the Info Button works fine) in both portrait and landscape orientation (without having to rotate the device or refresh the page).

It looks like the problem may somehow be unique to Mobile Safari under iOS 8.

Does the same thing happen in Chrome on your iPhone 6?

Also, do you see the same problem with the following link (which should also display the caption overlay on load and the Info Button)?
http://juicebox.net/demos/pro/full/#7

Maybe we can track this down to a certain combination of configuration options...

No. The use of 'presets' (to set a collection of configuration options all at once) is a feature of JuiceboxBuilder only.
It is not available in any of the plugins.

If you already have a gallery which you would like to replicate, then you could always just copy and paste the configuration options from your original gallery's XML file to the new gallery's XML file.

You're welcome!

That's great!
Many thanks for checking the bugfix and for posting screenshots.
It's greatly appreciated.

We hope to release a new version of Showkase incorporating this bugfix soon.
I will post back in this thread when it has been released and is available to download.

You can use the baseUrl method of embedding in a WordPress site just fine (similar to the instructions for Drupal and Joomla). This has none of the restrictions that using an iframe would have.

Essentially, once you have created a gallery with JuiceboxBuilder-Pro, you would upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into the body of your WordPress post (ensuring that the method of entry is 'Text' rather than 'Visual'). It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

Thank you for providing the URL to your gallery's web page.

Your gallery's 'jbcore' folder does not seem to be in the correct location on your web server.
According to your gallery's embedding code, the 'juicebox.js' file should be located here:
http://www.countyfairgrounds.net/findan … uicebox.js
... but it does not seem to be there. Going directly to that location in a browser results in an error 404 (file not found).
Please make sure that the contents of your gallery folder have been uploaded to your http://www.countyfairgrounds.net/findanevent/ directory.

It looks like the cropping of your Splash Page's image is caused by the following code starting at line 8 of your style.responsive.css file.

.responsive .axis-content-layout img,
.responsive .axis-content-layout video
{
   max-width: 100%;
   height: auto !important;
}

This code will affect the size of all images within the content section of your web page including your Splash Page image.
The Juicebox gallery has no option but to inherit such global CSS rules. (It is not possible to isolate a Juicebox gallery, or any other element on a web page, from global CSS.)
If possible, try applying these CSS rules to only those elements on your web page which require them through use of ids or classes. (Otherwise, you might find that just removing these CSS rules works OK.)

Yes. I was suggesting that you might like to create your own version of a Splash Page linking to a gallery page.
However, now that I know you are using WP-Juicebox, this might not be easy to achieve. It would be difficult to implement within WP-Juicebox as WP-Juicebox embeds galleries (or Splash Pages) directly into pages and posts and does not allow for a link to a full-page gallery to be used in place of the gallery itself.

@penum

Thank you for investigating further and for sharing your findings.

I have made some changes to my test site in order to try to fix this Showkase problem.
I have updated Showkase with a version which will hopefully fix the problem.
I have also created three separate galleries, each with a different setting for expandInNewPage.

I would be very grateful if you could view each of these galleries in your iPhone 6 to see if you can still see the problem.
All three galleries should fill the page and hide the navigation menu links under the menu icon.

http://stevenspeirs.x10.mx/sk135/

Many thanks for your help.