1140px desktop dimension

media-queries.scss

// Sass Media Query Breakpoints 

//
// Variables
//
$mobile-small-max-size: 320px !default;
$mobile-max-size: 640px !default;
$tablet-min-size: 768px !default;
$tablet-max-size: 979px !default;
$desktop-min-size: 979px !default;
$desktop-large-min-size: 1140px !default;

//
// METHOD 1
// 
// Inspired by https://gist.github.com/chriseppstein/1215856
//
// Usage:
//
// div {
//  color: blue;
//
// 	@include respond-to(mobile) {
// 	    color: red;
//   }
//
// }
//

@mixin respond-to($media) {
  @if $media == mobile-small {
          @media only screen and (max-width: $mobile-small-max-size) { @content; }
  }
  @else if $media == mobile {
          @media only screen and (max-width: $mobile-max-size) { @content; }
  }
  @else if $media == mobile-portrait {
          @media only screen and (max-width: $mobile-max-size) and (orientation: portrait) { @content; }
  }
  @else if $media == mobile-landscape {
          @media only screen and (max-width: $mobile-max-size) and (orientation: landscape) { @content; }
  }
  @else if $media == mobile-tablet {
          @media only screen and (max-width: $tablet-max-size) { @content; }
  }
  @else if $media == tablet {
          @media only screen and (min-width: $tablet-min-size) and (max-width: $tablet-max-size) { @content; }
  }
  @else if $media == tablet-landscape {
          @media only screen and (min-width: $tablet-max-size) and (orientation: landscape) { @content; }
  }
  @else if $media == tablet-desktop {
          @media only screen and (min-width: $tablet-max-size) { @content; }
  }
  @else if $media == desktop {
          @media only screen and (min-width: $desktop-min-size) { @content; }
  }
  @else if $media == desktop-large {
          @media only screen and (min-width: $desktop-large-min-size) { @content; }
  }
}