This demo ADP makes use of CSS grid to responsively layout survey elements within a browser viewport.
It provides:
- a set of CSS variables for colors and font size variants
- an animated background gradient (that can be deactivated)
- media queries to manage generic content at most resolutions
- image or survey name in title
- adaptive base font size
- question shortcut display above question caption
- footer with up to two containers for secondary / optional text/ links
Note 1: support for CSS grids is currently approx 75%: Edge 16+, Firefox 52+, Chrome 60+, Safari 10.1+ (not so well actually) and Opera 48+ only.
Note 2: for legacy browsers, this polyfill can be used.