// Responsive Mixins @mixin respond($media) { @if $media == portrait-phones { @media only screen and (max-width: $min-device-width) { @content; } } @else if $media == landscape-phones { @media only screen and (min-width: breakpoint($min-device-width)) and (max-width: breakpoint($tablet-device-width)) { @content; } } @else if $media == all-phones { @media only screen and (max-width: breakpoint($tablet-device-width)) { @content; } } @else if $media == portrait-tablets { @media only screen and (max-width: $tablet-device-width) { @content; } } @else if $media == tablets { @media only screen and (min-width: $tablet-device-width) and (max-width: $document-width - 1) { @content; } } @else if $media == desktop { @media only screen and (min-width: $tablet-device-width) { @content; } } @else if $media == document-width { @media only screen and (max-width: $document-width + 20) { @content; } } @else if $media == large-screens { @media only screen and (min-width: $max-device-width) { @content; } } @else if $media == print { @media print { @content; } } @else { @media only screen and ('#{$media}') { @content; } } }