Responsive Utilities
Most content and components in CNVS support responsive behavior for scaling either size or spacing. However, you'll often want to hide and show specific elements of your project based on a given screen resolution. Similarly, when optimizing your project for printing, you may wish to hide or show components. Use these useful pre-defined classes to trigger responsive behavior.
The .hidden-* class is useful for hiding a given element at a specific screen size. Replacing the -* modifier witd a screen size value (-mini, -small, -medium, -large, -jumbo) will hide the element at tdat screen-size. Additionally, appending -up and -down to the .hidden-*- class, will hide a given element up or down respectively at the specified screen-size.
| Class | Description |
|---|---|
.hidden-* |
Hide the element at the screen size specified by the -* modifier. |
.hidden-*-down |
Hide the element at and below the screen size specified by the -* modifier. |
.hidden-*-up |
Hide the element at and below the screen size specified by the -* modifier. |
|
Mini devices Portrait phones (< 480px) |
Small devices Landscape phones (≥ 480px) |
Medium devices Tablets (≥ 768px) |
Large devices Desktops (≥ 992px) |
Jumbo devices Desktops (≥ 1400px) |
|
|---|---|---|---|---|---|
.hidden-mini-down |
Hidden | Visible | Visible | Visible | Visible |
.hidden-small-down |
Hidden | Hidden | Visible | Visible | Visible |
.hidden-medium-down |
Hidden | Hidden | Hidden | Visible | Visible |
.hidden-large-down |
Hidden | Hidden | Hidden | Hidden | Visible |
.hidden-jumbo-down |
Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-mini-up |
Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-small-up |
Visible | Hidden | Hidden | Hidden | Hidden |
.hidden-medium-up |
Visible | Visible | Hidden | Hidden | Hidden |
.hidden-large-up |
Visible | Visible | Visible | Hidden | Hidden |
.hidden-jumbo-up |
Visible | Visible | Visible | Visible | Hidden |
Like the responsive class options, there are similar class options for toggling an elements visibility for print. Use the .visible-print-* option to make and element visible when the page is printed. The -* modifier is used to specify the display type. For example, .visible-print-inline displays an element as inline only when printed.
| Class | Browser | |
|---|---|---|
.visible-print-block |
Hidden | Visible |
.visible-print-inline |
Hidden | Visible |
.visible-print-inline-block |
Hidden | Visible |
.hidden-print |
Visible | Hidden |