Responsive utilities

Media queries allow you to change the CSS "on the fly", depending on the screen size, width and height ratio of the screen, the device type, etc. It is generally used to change min-width and max-width.

Supported classes

Table of classes shown here provides dynamic for different devices and their work in conjunction with the layout grid and media queries (split by device).

Class Smartphone from 480px and less Tablet from 768px up to 481px Desktop By default
.m-hide Hidden Visible Visible
.t-hide Visible Hidden Visible
.d-hide Visible Visible Hidden
.m-visible Visible Hidden Hidden
.t-visible Hidden Visible Hidden
.d-visible Hidden Hidden Visible

Using this functionality makes it possible not to create different versions of the same site for different devices. Instead, you can control content display and hiding depending on the device.

See the example of how it works:

Green mark means that the unit can be seen in the current template window.

Hide classes for different devices

Telephone
(.m-hide) Tablet
(.t-hide) Monitor
(.d-hide)
Telephone
(.m-hide) Tablet
(.t-hide) Monitor
(.d-hide)
Telephone
(.m-hide) Tablet
(.t-hide) Monitor
(.d-hide)

Dispaly classes for different devices

Telephone
(.m-visible) Tablet
(.t-visible) Monitor
(.d-visible)
Telephone
(.m-visible) Tablet
(.t-visible) Monitor
(.d-visible)
Telephone
(.m-visible) Tablet
(.t-visible) Monitor
(.d-visible)

Share with your friends

Google+