Responsive Info Grid

A responsive grid using media queries and jQuery matchHeight. The number of items per row is changes depending on the browser or device width.
The main heading and this intro text can be switched to the bottom of grid if required.
Each grid item has an image with overlay info link, an h1 heading and text. The matchHeight script is used to keep the height of the items equal despite varying content size.
The optional footer has an auto copyright year update and an optional smooth scroll to the top function.

alt 1

Grid Contents

Each grid item has an image, info link, heading and text.

alt2

HTML5 Element

The grid items are enclosed in an HTML5 article element so the heading is an h1.

alt  3

SEO

Using an HTML5 container to enclose the image, heading and text lets the search engines know that the items are all related.

alt 4

Equal Height

The heights of the grid items are kept the same despite varying amounts of text content using the matchHeight jQuery plugin.

alt 5

Items Per Row

The grid has 4 items per row when viewed on computers, 3 on an iPad in landscape mode, 2 on an iPad in portrait mode and 1 on an iPhone.

alt 6

CSS Media Queries

The number of items per row or changed at different browser or device widths using media queries.

alt 7

Main Container

The widget uses an HTML5 section element to contain all the items except the footer.

alt 8

Heading & Text Position

The main heading and/or the descriptive text can be switched from the top of the grid to the bottom if required.

alt 9

Grid Item Styles

Visual separation can enhanced be by using a border on the grid items or a contrasting background color.

alt 10

Footer

The optional footer allows the widget to create a fully responsive page when used with a suitable header/navigation widget.

alt 11

Auto Copyright Year Update

The footer has an option to add javascript to auto update the copyright year.

alt 12

Back To The Top

The smooth scroll to the top chevron icon is optional and is inserted by simply checking a box.

© EverWeb Widgets -

EverWeb Widgets