Topic: How make the viewer resize correctly for mobile phones

Dear people,

I have rewritten my website to keep up with the times.
My old website still used tables. Now the structure is as it should be.

But I can't get the JuiceBox viewer properly sized for mobile phones.
How can I make the viewer resize correctly when displayed on a mobile phone?

So far, I see a part of the first photo in the viewer that is cropped on all sides.
Is there a correct code for this that I can put into my website?

Kind regards,
Ellen

Re: How make the viewer resize correctly for mobile phones

So far, I see a part of the first photo in the viewer that is cropped on all sides.

Maybe you're just seeing the Splash Page (see here for details and scroll down).
The Splash Page is an image placeholder for the gallery which, when clicked, will expand the gallery to fill the browser viewport (to give the gallery as much room as possible).
By default, the Splash Page will be displayed on mobile devices when a gallery is embedded in a web page alongside other content (where the gallery might be too small to use). By default, Juicebox uses the first image in the gallery as the Splash Page image (and crops if necessary). You can change this if you like via the splashImageUrl option (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
You could also choose to not use the Splash Page at all by setting showSplashPage="NEVER".
Please note that these are Pro options (not available in Juicebox-Lite).

Also, if you are using a fixed value for your galleryWidth, try using a percentage instead (e.g. 100%).
However, please be sure to set widths for all parent containers using CSS so that your browser knows what the gallery's width should be 100% of.

Re: How make the viewer resize correctly for mobile phones

Hi Steven,

Thank you for your reply!

I use JuiceBox Lite.
On my previous website, those viewers worked well on mobile, but now they don't work properly anymore. You wrote that the options you mentioned do not apply to the Lite version.

Does that also apply to "then try using a percentage (for example 100%)."

Thanks again and kind regards, Ellen

Re: How make the viewer resize correctly for mobile phones

The gallery embedding options galleryWidth and galleryHeight,which can be expressed as absolute pixel values or as percentages (of their parent container), are supported by both Juicebox-Lite and Juicebox-Pro.
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look at the problem for myself and hopefully help further. Thank you.

Re: How make the viewer resize correctly for mobile phones

Hi Steven,

Thanks again for your patient support! I managed to do it. I'm completely happy again.

I am a hobby nature photographer and receive compliments so often about my website and the way the photos are arranged.
And I realize that all of this is possible because you make Juicebox lite available.
Thanks again!

Ellen

Re: How make the viewer resize correctly for mobile phones

I'm glad to hear you've managed to resolve your problem.
Thank you for posting back to let me know. It's most appreciated.
Best wishes!