Responsive Product Grid
Each grid item consists of an HTML5 article element. Inside this is a figure element and an aside.
The figure element contains an image with an alt text attribute. The aside element contains a heading, two text items and a CTA style link. The items in the sidebar are vertically centered.
When the page is viewed on a tablet device like an iPad in portrait mode, the sidebar slides over the figure and has a background with adjustable opacity. This allow the grid items to remain big enough to easily view the content and still sit side by side.
When the page is viewed on mobile phones in portrait mode, the each grid item assumes the full width of the screen.
If viewing this page on a computer, reduce the browser width to see the responsive action or use the browser's responsive mode to view it in specific devices.
The widget uses the EverWeb widget API Assets list to create the grid items so it can accomodate up to one hundred of them.The above heading and this text are optional.
The optional footer has auto update of the copyright year and a smooth scroll, back to the top chevron which can be added in by checking a couple of boxes.
The grid items have controls to style the various font sizes, colors and the background color. The items can have a border and/or box shadow.
The browser or device width at which the layout changes is the "break point". This is adjustable for different situations and the default value is 799px so that the change takes place when the page is viewed on a tablet device in portrait mode. This can be incresed if required to allow the sidebars to accomodate more text when viewed on computers.
The overlay seen on mobile devices can be styled for background color and opacity. There are controls for setiing the font color, data color and the link color.