Responsive Image Grid
The widget creates a responsive image grid with a heading, text description and an optional footer for creating a fully responsive page. Reduce the browser width to see how it responds to changes in browser and device width.
The images are inserted in an HTML5 figure element with alt text and a figcaption for the image caption so that the search engines know which caption goes with what image.
The image grid is responsive and the number of images per row changes depending on the device type. The number of images per row is set in the widget settings by entering the number for each device type.
The grid is intended for a single line caption. The caption can be extended to two lines by checking a box and using the HTML line break <br> to create the return.
It is important to check the grid in the browser by reducing the browser width to test the responsive effect and to make sure that any of the captions aren't too long.
All the images must be cropped to the same size and aspect ratio. If the grid is set to a maximum width of 1200px, the image files should be about 400px wide.
The h1 heading and the descriptive text can be situated above or below the image grid. The text can have a web safe font or a non web safe or Google hosted font with a web safe fallback. See the Info Section of this site to find out about fonts.
Hyperlinks can be style for color, hover color and text decoration. See the Info Section for how to create links.
By default, the images are hyperlinks. If these are not required enter the hash sign # into the URL box and check the box to change the cursor to the default arrow when it hovers an image.
The container background can be adjusted for opacity and there are controls for overall padding, border width, color and radius and box shadow color and radius.
The footer can have several lines of text using the HTML line break <br> to create returns. The vertical position of the text can be adjusted.
Use © to create the © symbol.
The footer has an optional smooth scroll to the top function and a checkbox for preventing phone numbers being converted to hyperlinks on iPads.