CSS: responsive
.instui-hidden-max-md — Responsive visibility: .instui-hidden-max-<bp> / -hidden-min-<bp> hide by viewport width; the -cq- variants react to a .instui-container ancestor's width instead. Breakpoints sm/md/lg/xl.
Source: responsive.ts
Usage
css
@import "@pantoken/components/utilities.css";Examples
html
<div class="instui-hidden-max-sm">Hidden at or below the small breakpoint.</div>Hidden at or below the small breakpoint.
Conditions
| Type | Query | Description |
|---|---|---|
| media | (max-width: 30rem) | — |
| media | (min-width: 30rem) | — |
| media | (max-width: 48rem) | — |
| media | (min-width: 48rem) | — |
| media | (max-width: 64rem) | — |
| media | (min-width: 64rem) | — |
| media | (max-width: 80rem) | — |
| media | (min-width: 80rem) | — |
| container | (max-width: 30rem) | — |
| container | (min-width: 30rem) | — |
| container | (max-width: 48rem) | — |
| container | (min-width: 48rem) | — |
| container | (max-width: 64rem) | — |
| container | (min-width: 64rem) | — |
| container | (max-width: 80rem) | — |
| container | (min-width: 80rem) | — |