Print

Smart Countdown module implements responsive behavior. The module published below is a sample. You have to view this page on a desktop or laptop computer or in other words in a browser window that can be resized (not full-screen). First resize this window to be wide enough. Then start resizing to make window width smaller. Joomla 3 protostar template will "respond" to this action and will allow you to make the window really tight. Observe how Smart Countdown module is changing its layout: first it just displays smaller without wrapping to the next line. On the last iteration, when you horizontally squeeze the browser window, the module is displayed in an alternative layout, fitting perfect into the content area.

Test Event
1
1
6
6
0
0
6
6
Days
1
1
2
2
Hours
4
4
9
9
Minutes
3
3
9
9
Seconds
Test Event
1
1
6
6
0
0
6
6
Days
1
1
2
2
Hours
4
4
9
9
Minutes
3
3
9
9
Seconds

To achive this effect both "responsive scaling" and "conditional display with duplicate" methods were used. While the window remains wide enough the module "responds" by scaling its size to a smaller value. On the last step the module is actually hidden and its copy is displayed automatically in the same position (obviousely, this copy was hidden originally). This module copy has same settings by default (event date and time, event title, etc.) so the counter value looks consistent. The settings altered in the copy are related to layout - in this example I simply switched horizontal layout to vertical, but you are free to implement your own settings (e.g. displaying labels below digits can also save horizontal space, etc.)