Caption Overlays - Large amounts of text

Where possible image caption text (which sits over the image) should be kept to a minimum, so as to display cleanly on mobile as well as desktop, but in instances where there is a requirement for a large amount of text there are a couple of approaches to take to formatting the content for desktop and mobile.

Our Example Content

Background Image Size

Instead of using a fixed / cropped background image, which restricts what we can do with the image, the image container has been resized to the required dimensions using the ORANGE CROP ICON > Image Format settings.

Applied image shown to the right.

OPTION 1 - Custom Mobile Height

Setting a custom height for the image container on mobile

Because our image is set to scale in the background, the image container can be scaled in mobile mode to show in a vertical format instead. via the IMAGE WIZARD (crop icon)

Image crop settings shown above, with the image container height set to 40% of the width (2/5 aspect) as the default / desktop setting, and the height on mobile set to 200% (2/1 aspect)

Result on Mobile

OPTION 2 - Caption Below on Mobile

This approach is useful if you have a fixed image size or want to keep the aspect ratio of the image the same on mobile.

You can check the option SHOW CAPTION BELOW ON MOBILE in the caption area. If the caption text colour is the same colour as the page background e.g. white you need to apply a background colour to an element in the snippet. The recommended element is FIGURE.

Setting the background colour

While its possible to set a colour on the ROW or COLUMN areas of the snippet block, these elements have padding applied which would lead to colour showing outside the image area.

The FIGURE element is the wrapper for the image and caption, so applying it there will colour the area immediately behind the image.