Mobile Image Grid
A responsive image grid with captions. It can be configured as an image grid to show off photos as a better alternative to a slideshow.
Checking a box allows the images to be configured as hyperlinks so that it can be used as a pictorial navigation if required.
Each image is contained in an HTML5 figure element with a figcaption and an alt text attribute.
The settings are preconfigured to show two images per row when the phone is in landscape mode and one in portrait. If viewing this page on a computer, use the browser's responsive mode. See the Testing section of this site for more info.
Horizontal spacing between the images is achieved by altering the padding of the figure element.
The widget has an optional h1 heading above the images and an h2 below.
Captions can extend to two lines by using the HTML line break <br> to create returns. A checkbox is provided to increase the figcaption height to accomodate the extra line to prevent breaking the grid.
The optional footer allows a fully responsive page to be created. It has an auto update feature for the copyright date and a smooth scroll to the top function.
Text links can be styled and inserted in the descriptive text. Make sure the link padding is set to at least 7px to make the target area big enough for a fingertip.