Skip to Content


Call a media query for many various sizes (including Bootstrap breakpoints) by name.

Sass July 17, 2019


media($group, $custom)


(Required) (String) The name of the size group
Default: None

(Optional) (String) A custom media query
Default: None

Parameter Notes

$group can be anything from “ultrawidescreen” to “tablet” or “tablet_landscape” to “print” or even Bootstrap group names such as “sm”, “md”, “lg”, and extended sizing like “xl”, “xxl”, and “uw”.

If using $custom, pass “custom” to the $group parameter.

Request or provide clarification »


.element {@include media("mobile") {background: red;};}
.element {@include media("custom", "only screen and (max-width: 550px)") {background: red;};}

Additional Notes

Current group size breakpoints:

  • “ultrawidescreen”: 2048px (and larger)
  • “widescreen”: 1600px (and larger)
  • “tablet_landscape”: 1023px (and smaller)
  • “tablet”: 767px (and smaller)
  • “mobile_landscape”: 668px (and smaller)
  • “mobile”: 376px (and smaller)
  • “print”
  • “sm”: 544px (and larger)
  • “md”: 768px (and larger)
  • “lg”: 992px (and larger)
  • “xl”: 1200px (and larger)
  • “xxl”: 1600px (and larger)
  • “uw”: 2048px (and larger)
Was this page helpful? Yes No

    A feedback message is required to submit this form.

    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

    Located in /assets/scss/partials/_mixins.scss on line 165.

    @mixin media($group, $custom: ""){
        //Device Types
        @if ( $group == "desktop" or $group == "laptop" ){
            @media (hover: hover){& {@content}} //Devices that can hover
        @if ( $group == "smartphone" or $group == "touchscreen" ){
            @media (hover: none) and (pointer: coarse){& {@content}} //Devices that cannot hover and have a coarse pointer
        @if ( $group == "print" ){
            @media only print {& {@content}}
        //Screen Sizes
        @if ( $group == "tablet_landscape" ){
            @include tablet(landscape){& {@content}} //This size and smaller
        @if ( $group == "tablet" ){
            @include tablet(){& {@content}} //This size and smaller
        @if ( $group == "mobile_landscape" ){
            @include mobile(landscape){& {@content}} //This size and smaller
        @if ( $group == "mobile" ){
            @include mobile(){& {@content}} //This size and smaller
        @if ( $group == "sm" ){
            @media (min-width: #{$sm}px){& {@content}} //This size and larger
        @if ( $group == "md" ){
            @media (min-width: #{$md}px){& {@content}} //This size and larger
        @if ( $group == "lg" ){
            @media (min-width: #{$lg}px){& {@content}} //This size and larger
        @if ( $group == "xl" ){
            @media (min-width: #{$xl}px){& {@content}} //This size and larger
        @if ( $group == "xxl" or $group == "widescreen" ){
            @media (min-width: #{$xxl}px){& {@content}} //This size and larger
        @if ( $group == "ultrawidescreen" or $group == "uw" ){
            @media only screen and (min-width: 2048px){& {@content}} //This size and larger
        //Custom media query
        @if ( $group == "custom" ){
            @media #{$custom} {& {@content}}


    To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

    @mixin media($group, $custom){
        //Write your own code here, leave it blank, or return false.