code

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 DevicesPortrait
Tablet Devices
Landscape
Tablet Devices
Laptop DevicesDesktop Devices
Screen sizes0-600px601-992px993-1200px1201-1600px1600px +
Class Prefix.xs.s.m.l.xl
Container Width85%85%85%80%80%
Number of Columns1212121212

Sass

Variables

Mobile Devices$xsmall-screen-max600px
Portrait Tablets$small-screen-min601px
 $small-screen-max992px
Landscape Tablets$medium-screen-min993px
 $medium-screen-max1200px
Laptops$large-screen-min1201px
 $large-screen-max1600px
Desktops$xlarge-screen-min1601px

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 DevicesPortrait Tablet DevicesLandscape Tablet DevicesLaptop DevicesDesktop 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.

ClassScreen Range
.hideHidden for all Devices
.hide-on-xsmallHidden for Mobile Only
.hide-on-xsmall-and-downHidden for Mobile Only
.hide-on-small-and-downHidden for Portrait Tablet and Below
.hide-on-small-and-upHidden for Portrait Tablet and Above
.hide-on-smallHidden for Portrait Tablet only
.hide-on-medium-and-downHidden for Landscape Tablet and Below
.hide-on-medium-and-upHidden for Landscape Tablet and Above
.hide-on-mediumHidden for Landscape Tablet only
.hide-on-large-and-downHidden for Laptop and Below
.hide-on-large-and-upHidden for Laptop and Above
.hide-on-largeHidden for Laptop only
.hide-on-xlarge-and-upHidden for Desktop and Above
.hide-on-xlargeHidden 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.

ClassScreen Range
.showVisible for all Devices
.show-on-xsmallVisible for Mobile Only
.show-on-xsmall-and-downVisible for Mobile Only
.show-on-small-and-downVisible for Portrait Tablet and Below
.show-on-small-and-upVisible for Portrait Tablet and Above
.show-on-smallVisible for Portrait Tablet only
.show-on-medium-and-downVisible for Landscape Tablet and Below
.show-on-medium-and-upVisible for Landscape Tablet and Above
.show-on-mediumVisible for Landscape Tablet only
.show-on-large-and-downVisible for Laptop and Below
.show-on-large-and-upVisible for Laptop and Above
.show-on-largeVisible for Laptop only
.show-on-xlarge-and-upVisible for Desktop and Above
.show-on-xlargeVisible for Desktop Only

Usage
.show-on-small

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

Examples
Currently
.hide-on-xsmall-and-down
.show-on-xsmall-and-down
.hide-on-xsmall
.show-on-xsmall
.show
.hide-on-small-and-down
.show-on-small-and-down
.hide-on-small
.show-on-small
.hide-on-small-and-up
.show-on-small-and-up
.hide-on-medium-and-down
.show-on-medium-and-down
.hide-on-medium
.show-on-medium
.hide-on-medium-and-up
.show-on-medium-and-up
.hide-on-large-and-down
.show-on-large-and-down
.hide-on-large
.show-on-large
.hide-on-large-and-up
.show-on-large-and-up
.hide
.hide-on-xlarge
.show-on-xlarge
.hide-on-xlarge-and-up
.show-on-xlarge-and-up