CSS Visibility     

There are some CSS classes that you can use out of the box for common functionality.

Window Width Related

First of all, let’s define what does a small, medium, big or large window means:

Now on to the window width related CSS classes.

You can also show some DOM element or component if it’s lower than one of the sizes. Same for greater than one of the sizes. Just attach lt- or gt- prefixes, which come from “lower than” and “greater than”. Example: lt-md (display on xs and sm only), lt-xl (display on xs, sm, md and lg windows only), gt-md (display on greater than medium windows: lg and xl).

NOTE
You can combine the visibility classes with the inline class for inline-blocks.
Example : <span class="gt-sm inline">&nbsp;and here is the end of this long sentence.</span>

Platform Related

Visible only on:

Hide on:

Also check Quasar Theming > Platform Specific Styles.

NOTE
Based on your needs, you might want to also check Javascript > Environment page to see how you can achieve the same effect using Javascript. This latter method allows you to not even render a DOM element or component. It is useful when the rendering process is expensive.

Orientation Related

Printing Related