Media Queries

Media Queries are CSS3 modules that allow your rendered content to adapt to different screen resolutions. Media Queries are one third of process for executing Responsive Web Design. These features can be very useful for the width and height of content. It can be tailored to a specific range of output devices without having to actually change the content itself.

NOTE

If you need the pixel values of these, just divide the REM value by the base unit (16).

@media screen and (min-width: 75rem) { ... }

NOTE

The Schema grid system is based on the 960 grid system. Some default media queries are written for large screens, tablets, and mobile devices.

Size Breakpoint Viewport
@bp-desktop Screen and (min-width: 75rem) Desktop Screens
@bp-tablet Screen and (min-width: 48rem) and (max-width: 61.1875rem) Tablet Screens
@bp-mobile Screen and (max-width: 47.9375rem) Mobile Screens

Hide Elements

Sometimes you need to hide/show content for different viewports. We got that. Applying these classes hides the content at the respective breakpoint.

Class Description
desktop-hidden Apply this class when you want to hide items on desktop screens only
tablet-hidden Apply this class when you want to hide items on tablet screens only
mobile-hidden Apply this class when you want to hide items on mobile screens only
<div class="mobile-hidden">
  { ... }
</div>

Show Elements

Like hidding, but only show content during certain breakpoints.

Class Description
show-desktop Apply this class when you want to show items on desktop screens only
show-tablet Apply this class when you want to show items on tablet screens only
show-mobile Apply this class when you want to show items on mobile screens only
<div class="show-tablet">
  { ... }
</div>