Skip to Content

media()

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

Sass July 17, 2019

Usage

Sass
media($group, $custom)

Parameters

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

$custom
(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 »

Examples

Sass
.element {@include media("mobile") {background: red;};}
Sass
.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)

Source File

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

Sass
@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
    }

    //Bootstrap
    @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}}
    }
}

Override

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

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