Using Media Queries

Alternatively to the Resolution Breakpoints, CSS media queries can be used directly in components’ custom CSS style properties to achieve responsive behavior at a given viewport width using the @media CSS rule.

The @media CSS at-rule allows applying CSS styles depending on a device's general type or other characteristics such as screen resolution or browser viewport width.

Besides the same functionality as the Breakpoints property provides, CSS media queries make possible to change component styles based not only on the viewport width, but target also:

• Media type (all, print, screen)

• Actual screen resolution

• Display mode

• Device orientation

• Input device features

• Screen technical features

• User agent color processing settings

• Operating system preferences

If the Breakpoints property is already being used, CSS media queries are still a great tool to adjust the style and behavior of components on specific intermediate viewport widths in between the values declared in the Breakpoints list. This helps to avoid creating extra resolution breakpoints for single-use cases, keeping the list of key resolution breakpoints easy to navigate.

A @media rule consists of an optional media type and any number of feature expressions, which may be combined using logical operators. In the most general form, the rule syntax looks as following:

@media type operator (feature: value) {
  selector {
    property: value;
  }
}

Multiple @media rules can be combined in a single rule using commas ( , ) or be nested inside each other using the regular CSS nesting syntax with curly brackets ( {} ).

To target a media query, there are plenty of specific features available. Here is a quick overview of the supported options:

To combine the media type and one or several media features inside a media query, logical operators not, and, only, and or can be used.

So, a rule targeting the viewport width of the browser could look like this:

@media screen and (max-width: 800px) {
  selector {
    property: value;
  }
}

Such rule will trigger only on devices with a screen and apply styles to the matching elements if the viewport width is 800 pixels or less.

A media query resolves to true when the specified media type (if present) matches the device on which a dashboard is being displayed and all media feature expressions within the rule resolve as true.

To apply a media query rule to a web dashboard component, just write it in the component’s appropriate custom CSS style property.

1. In the UI Builder, add a component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

3. In the Properties Editor, switch to a tab containing a custom style property.

4. In the opened tab, add the base CSS styles to the local custom CSS field to have something extra to work with later:

font-size: 40px;
font-weight: 900;
color: hotpink;
transition: 0.24s;

A component having initial custom styles isn’t necessary for media queries to function. We are adding some base styles to the component here to make the example more clear in the sense of what happens when the viewport width changes.

5. In the same property, add the media query targeting a specific viewport width and add the styles to apply if the defined condition is true. Set the width below your screen size to ensure you will be able to test the resulting changes at the end:

@media screen and (max-width: 900px) {
  font-size: 20px;
  padding: 40px 80px;
  background-color: indigo;
}

As in the case of using plain CSS properties in component custom styles in Iotellect UI Builder, using media queries doesn't require a CSS selector inside the rule for the most basic scenarios thanks to CSS Editor features.

6. The base style outside of the @media rule is applied once the field is out of focus, and you can see it on the dashboard in the UI Builder.

7. To test the added media query in action, open the dashboard in a separate Preview Mode tab by clicking the () Run button in the right part of the UI header.

8. Resize the browser window containing the opened tab until its width hits the value defined in the @media rule. The moment it happens, responsive styles are applied and changes are visible on the dashboard. Resize the window wider than the specified width value again to see how the styles change back. 

As everywhere else in CSS, if a style property added to an element unconditionally isn’t redefined within a media query, it keeps being applied when the @media rule resolves as true and applies its content to the element.

Was this page helpful?

Tell us more

Send

Thank you!