The GavernWP framework makes it possible – and very easy — to create themes based upon Responsive Web Design. That is why it includes two additional CSS styles:
- tablet.css
- mobile.css
Administration panel options make it possible to specify when these styles will be loaded. A two-column layout (if a column is switched on) is applied when the tablet.css file is loaded.
Once the maximum width for the tablet.css file has been reached, the page’s layout is automatically changed into a single column and that column is placed either before or after the page’s main content.
Additionally, in widget positions like Top or Bottom 1/2/3, modules with a three-column layout become one-column layout modules.
After loading the mobile.css file, single-column layout is applied everywhere.
A very important feature is the ability to specify whether a module will be loaded in tablet or mobile mode. More information can be found in the Widget Rules entry.