Topic: Gallery Spacing / Placement Distortion on Mobile

I've been working on integrating simpleviewer into a portfolio site and I've got it working smoothly in all desktop browsers, but when I try to view it on mobile or tablet, the spacing of the gallery seems to jump down below the rest of the page, as if there were some clear happening in the CSS that won't allow the gallery to appear to the right of the description. The link to the page is below:

http://bit.ly/MujGZb

Can anyone advise as to what might be the trouble / how to fix this? I've been manipulating as many of the values as I can think of but I can't get it to resolve it's position.

Many thanks for the help...

Re: Gallery Spacing / Placement Distortion on Mobile

The following may not be a complete solution but it certainly helps with the layout in Firefox when Adobe Flash Player is disabled and the gallery is displayed by the Mobile Player. (The gallery is no longer displayed below all the text.) In your 'photos.html' page, change:

<div id="sv-container"></div>

... to:

<div id="gallery-container">
    <div id="sv-container"></div>
</div>

... and then change your gallery's dimensions to 100% x 100%, i.e.:

simpleviewer.load("sv-container", "100%", "100%", "transparent", true);

Now, in your 'main.css' page, change:

#sv-container

... to:

#gallery-container

Also, your <div id="wrapper"> is not closed.

Steven Speirs
SimpleViewer Support Team.

Re: Gallery Spacing / Placement Distortion on Mobile

Awesome! That's leaps forward... Many thanks.

Re: Gallery Spacing / Placement Distortion on Mobile

Is there any way to change the default "SimpleViewer Gallery" title in the tab that opens on mobile? I tried in the index file but it didn't seem to take...

Re: Gallery Spacing / Placement Distortion on Mobile

If you are referring to the browser title which is displayed when the gallery is in Fulscreen mode on a mobile device, then this can be changed by opening the 'svcore/full.html' file in a plain text editor and modifying the contents of the <title></title> tags.

Steven Speirs
SimpleViewer Support Team.

Re: Gallery Spacing / Placement Distortion on Mobile

I have to say this has been rock star support. Much obliged!

Re: Gallery Spacing / Placement Distortion on Mobile

It looks like my fix was not universal.
Your web page's layout does not work well in Firefox 14.0.1 on my PC (though it works fine in IE9, Chrome 20, Safari 5.1.7 and Opera 12). In Firefox 14.0.1, the gallery takes up the full browser window width overlapping your text.
Try giving your 'gallery-container' <div> the same width as your 'sv-container' <div> via CSS.
Also, your web page has an extra opening <head> tag on line 6 which should not be there.

Steven Speirs
SimpleViewer Support Team.

Re: Gallery Spacing / Placement Distortion on Mobile

Thanks again for the "above and beyond" testing assistance. I updated Firefox on the Mac after having made your recommended changes. The gallery seems to be in the proper position now. Could I trouble you to take a look again on your end when you have a moment? I'm curious if you are still seeing the "broken" page on PC with Firefox 14...

Re: Gallery Spacing / Placement Distortion on Mobile

I'm curious if you are still seeing the "broken" page on PC with Firefox 14...

Yes. See this screenshot.
Try my suggestion of giving your 'gallery-container' <div> the same width as your 'sv-container' <div> via CSS.
I can always check it again once you have made the change.

Steven Speirs
SimpleViewer Support Team.

Re: Gallery Spacing / Placement Distortion on Mobile

Yikes! That's definitely something it would be good to fix.

I thought I had put in the changes you requested. Lines 360 - 373 of my main.CSS sheet read:

#sv-container {
    width: 754px;
}
#gallery-container {
    overflow: visible;
    z-index: 1000;
    position: absolute;
    clear: both;
    top: 195px;
    height: 477px;
    width: 754px;
    left: 49px;
    cursor: pointer;
}

Isn't that what you mean by set the width to be the same?  I tried duplicating all fields and it pushed the whole gallery down and to the right. Sorry for the remedial CSS clarification...

Re: Gallery Spacing / Placement Distortion on Mobile

I've just checked your web page again and the layout now displays the gallery in the correct position in Firefox 14.0.1 (and all other major desktop browsers).

Steven Speirs
SimpleViewer Support Team.