1 (edited by alicia.angner 2018-02-06 23:09:06)

Topic: Juicebox Gallery expanded on Mobile is too large

http://thejollydutchman.com/gallery.html

I need some help. When I click on the splash page on my mobile device, it directs to the expansion of the gallery. This isn't an issue. My problem is that the expanded gallery is too large! It doesn't fit the page correctly. How can I fix this?

Thanks,
Alicia

Re: Juicebox Gallery expanded on Mobile is too large

The expanded gallery seems to be the correct size for the browser viewport but it has a margin to the top and left which pushes it down and to the right.
This margin (or padding) can be seen for a short period of time when the gallery is expanded in a desktop browser (before the gallery is quickly redrawn to fill the browser window) but it seems strange that it should happen on an iOS device where the gallery is expanded on a new page of its own (where custom CSS from the embedding page cannot interfere with the gallery's layout).

I've not been able to replicate the problem in a test gallery of my own so I'm not exactly sure of the cause of the problem on your own web page.
However, I think the problem may be to do with the fact that your gallery has a galleryWidth and a galleryHeight of 75%. This essentially tells Juicebox to fill only 75% of the width and height of the gallery's parent container with the gallery (resulting in some blank space).

Try setting your galleryWidth to 100% and your galleryHeight to a fixed pixel value (such as 600px) to see if this helps. You can then tweak the position of your gallery's container via CSS if necessary.
(You could try setting your galleryHeight to 100%, too, but unless your gallery's parent container has a height set via CSS, Juicebox will not know what the gallery's actual height should be 100% of.)

Hopefully this will help.