Skip to Content

mobile()

A shortcut for mobile media queries.

Sass February 22, 2017

Usage

Sass
mobile($orientation)

Parameters

$orientation
(Optional) (String) The device orientation
Default: "portrait"

Parameter Notes

“portrait” triggers at 668px and smaller.

“landscape” triggers at 376px and smaller.

Request or provide clarification »

Examples

Sass
.element {@include mobile(){background: red;};}
Sass
.element {@include mobile(landscape){background: purple;};}

Source File

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

Sass
@mixin mobile($orientation: "portrait"){
    @if $orientation == "landscape" {
        @media only screen and (max-width: 668px){& {@content}} //This size and smaller
    } @else {
        @media only screen and (max-width: 376px){& {@content}} //This size and smaller
    }
}

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 mobile($orientation){
    //Write your own code here, leave it blank, or return false.
}