Topic: iPhone Gallery Looks Tiny in iframe

Hi -- I've used svBuilder-Pro v2.3.1 to create an image gallery with no thumbnails that autoplays on my homepage.  The URL is

I'm using WordPress and Genesis for the webpage - so the image gallery is being shown in a text widget via an iframe based on the instructions found here: … p?id=11686.  The iframe code being used to display the gallery is:

<iframe src="" width="908" height="605" frameborder="0" scrolling="no"></iframe>

The gallery looks and works great on desktops and my iPad, but on an iPhone the images look tiny and there is a huge amount of blank whitespace around the pictures.  If I open just the URL directly on the iPhone the images look much bigger and span the screen horizontally when holding the iPhone vertical and span the iPhone vertically when holding the iPhone horizontally.

Is there any way to make the homepage when viewed on the iPhone look like it does when viewed on the desktop and the iPad?


Re: iPhone Gallery Looks Tiny in iframe

When viewing your gallery on an iPod Touch, the width of the gallery is OK (as can be seen by the navigation arrows near the edges of the screen, but there is a lot of space below the gallery.
(There is also space to the left and right of the images but this is due to the small height of the gallery and the images being scaled within the image area to keep their original aspect ratios.)

For testing purposes, try loading a completely different page into your <iframe> to see if the problem is related to the SimpleViewer gallery or the layout of your page.
As the gallery is isolated in an <iframe>, I suspect that the space you see below the gallery will still be there when loading any page into your <iframe>.

Try validating your page with the W3C Markup Validation Service and fix the HTML errors reported.
The first error is actually with the positioning on your page of the 'textwidget' <div> which contains your <iframe> so this may well be relevant to the problem.

Steven Speirs
SimpleViewer Support Team

Re: iPhone Gallery Looks Tiny in iframe

Thanks for the feedback.  As suggested, I substituted a completely different URL ( for the URL of my gallery in the iframe statement to see if it was a layout issue.  All I changed was the URL -- kept all other iframe options the same.  After the adjustment, CNN displayed perfectly on the iPhone inside the iframe -- fully spanning the frame.

I did a bit of poking around and was actually able to fully fix the issue by adjusting the relative size of the sv-container in the gallery's index.html page to match the max height and width (in pixels) of the gallery instead of leaving it as 100%.  After making the following change it looks right on a desktop, the iPad, and the iPhone:

Original line from the gallery's index.html:
simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '100%', '100%', 'transparent', true);

Changed line from gallery's index.html:
simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '908', '605', 'transparent', true);

Thanks for all the help!

Re: iPhone Gallery Looks Tiny in iframe

Perhaps, using a percentage height, it would have been necessary to implement the suggestion in the 'Using Percentage Heights' note in the Embedding into a HTML Page section.
However, I am glad that you have found a solution to your problem by changing the gallery's dimensions from percentages to absolute pixel values.

Steven Speirs
SimpleViewer Support Team