• Registered: 2015-10-30
  • Posts: 23

Topic: Captions which are multiple lines on mobile move up, over image

I have set up captions to sit below the images. Looks good on desktop. On an iPhone, with captions above a certain length (if they are long enough to break onto multiple lines on the iPhone's screen), the entire caption gets pushed up, so that it sits partially on top of the image. I want the caption to start in the same place (below the image, as defined by the amount of caption padding I've entered using custom CSS), and if there is enough text for a line break, the next line should start below the first. As is, the entire caption is being moved up.

I tried messing with the max caption height setting in the builder, but if I increase this, it does other undesired things to the layout.

I am embedding the gallery in an iframe on squarespace.

Here's where I'm testing it:
http://www.erikarand.com/juicebox-test

First image looks good. Second image has the issue I'm describing ("Sneffels Mountain Range ..."). Let me know if you need additional info. Thanks!

  • Registered: 2015-10-30
  • Posts: 23

Re: Captions which are multiple lines on mobile move up, over image

To add a little more context: the same problem does not occur on desktop when resizing window down to minimum width (which triggers squarespace's mobile layout).

It does occur on both Chrome and Safari on iOS.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Captions which are multiple lines on mobile move up, over image

The problem you are encountering is likely to be due to captionPosition being used only in Large Screen Mode (and not in Small Screen Mode). (This is noted in the description for the option in the Caption Options section of the Config Options page.)
In Small Screen Mode, captionPosition will always be set to its default value of OVERLAY_IMAGE.

There is much less screen real estate on a mobile device and for the caption text to be legible, it might take up too much space if it has an area of its own.

You could either:
(1) Set a captionBackColor and captionBackTopColor so that the caption can clearly be seen when it is overlaid on top of the image.
... or:
(2) Set screenMode="LARGE" so that the gallery is displayed in Large Screen Mode on all devices and in all browsers (so that all Large Screen Mode options are used).

Please note that priority is given to the main image rather than the caption text.
A long caption may be truncated if the maxCaptionHeight is not large enough. (A long caption will not push the main image up the screen resulting in the image being scaled smaller.)

  • Registered: 2015-10-30
  • Posts: 23

Re: Captions which are multiple lines on mobile move up, over image

Setting it to always use large screen mode fixed the problem. This is a little strange, because it didn't actually look like it was ever using small screen mode before (I never saw the splash screen).

In my opinion the positioning of the caption should be customizable in small screen mode. There are plenty of scenarios on mobile where it makes sense for the caption to not overlay the image.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Captions which are multiple lines on mobile move up, over image

Setting it to always use large screen mode fixed the problem.

That's great. Thank you for letting me know.

(I never saw the splash screen)

That's because the gallery is embedded in a web page at 100% x 100% with no other content on the page.
The gallery is not actually embedded into your main page. The gallery is embedded into the page which is loaded into your iframe. (This is the page which contains the gallery's embedding code.)
The Splash Page is displayed only when a gallery is embedded in a web page at less than 100% x 100% (or if showSplashPage="ALWAYS").

In my opinion the positioning of the caption should be customizable in small screen mode.

The best thing to do would be to post your suggestion in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.