Screen Sizes

We have 5 media queries you can use in your code. This also includes media query variables that will define the range.

	Mobile Devices	Portrait Tablet Devices	Landscape Tablet Devices	Laptop Devices	Desktop Devices
Screen sizes	0-600px	601-992px	993-1200px	1201-1600px	1600px +
Class Prefix	.xs	.s	.m	.l	.xl
Container Width	85%	85%	85%	80%	80%
Number of Columns	12	12	12	12	12

Sass

Variables

Media Queries

          @media #{$medium-and-up} {
            // styles for medium screens and larger
          }
          @media #{$medium-and-down} {
            // styles for medium screens and down
          }
          @media #{$medium-only} {
            // styles for medium screens only
          }
        

Mobile Devices	Portrait Tablet Devices	Landscape Tablet Devices	Laptop Devices	Desktop Devices
$xsmall-and-up1 $xsmall-and-down2 $xsmall-only	$small-and-up $small-and-down $small-only	$medium-and-up $medium-and-down $medium-only	$large-and-up $large-and-down $large-only	$xlarge-and-up3 $xlarge-and-down4 $xlarge-only

1. Equivalent to all screen sizes
2. Equivalent to $xsmall-only
2. Equivalent to $xlarge-only
4. Equivalent to all screen sizes

Hiding Content

We provide easy to use classes to hide content on specific screen sizes. These classes can be added to HTML Elements to affect visibility on certain displays.

Class	Screen Range
.hide	Hidden for all Devices
.hide-on-xsmall	Hidden for Mobile Only
.hide-on-xsmall-and-down	Hidden for Mobile Only
.hide-on-small-and-down	Hidden for Portrait Tablet and Below
.hide-on-small-and-up	Hidden for Portrait Tablet and Above
.hide-on-small	Hidden for Portrait Tablet only
.hide-on-medium-and-down	Hidden for Landscape Tablet and Below
.hide-on-medium-and-up	Hidden for Landscape Tablet and Above
.hide-on-medium	Hidden for Landscape Tablet only
.hide-on-large-and-down	Hidden for Laptop and Below
.hide-on-large-and-up	Hidden for Laptop and Above
.hide-on-large	Hidden for Laptop only
.hide-on-xlarge-and-up	Hidden for Desktop and Above
.hide-on-xlarge	Hidden for Desktop Only

Usage

          <div class="hide-on-small-and-down"></div>
        

Showing Content

We provide easy to use classes to show content on specific screen sizes.

Class	Screen Range
.show	Visible for all Devices
.show-on-xsmall	Visible for Mobile Only
.show-on-xsmall-and-down	Visible for Mobile Only
.show-on-small-and-down	Visible for Portrait Tablet and Below
.show-on-small-and-up	Visible for Portrait Tablet and Above
.show-on-small	Visible for Portrait Tablet only
.show-on-medium-and-down	Visible for Landscape Tablet and Below
.show-on-medium-and-up	Visible for Landscape Tablet and Above
.show-on-medium	Visible for Landscape Tablet only
.show-on-large-and-down	Visible for Laptop and Below
.show-on-large-and-up	Visible for Laptop and Above
.show-on-large	Visible for Laptop only
.show-on-xlarge-and-up	Visible for Desktop and Above
.show-on-xlarge	Visible for Desktop Only

Usage

          <div class="show-on-small"></div>
        

Examples

Currently