Media Query -PCUI

Media Query

Documentation and examples in working with Media Query Classes in PCUI

Available classes

The class="* only" classes display the element when the viewport is at the given breakpoint. For example, class="lg only" displays an element on large viewport only.
The class="* hidden" classes hide the element when the viewport is at the given breakpoint. For example, class="xl hidden" hides an element on extra-large viewport only.
The class="* or lower hidden" classes hide the element when the viewport is at the given breakpoint or smaller. For example, class="md or lower hidden" hides an element on extra-small, small, and medium viewports.
The class="* or higher hidden" classes hide the element when the viewport is at the given breakpoint or wider. For example, class="md or higher hidden" displays an element on medium, large, and extra-large viewports.
The class="print *" classes show or hide the element that corresponds print view. For example, class="print hidden" hides an element only in print view.

Test cases

Resize your browser or load on different devices to test the media query classes. You can also use browser's print preview to test print classes. Green checkmarks indicate the element is visible in your current view/viewport.

You're in print view