Media Queries

How to use it

This is an example where an element has position relative for mobile and position absolute from the md breakpoint

.element {

  @include media-up(md) {
    // your content here

Mixin arguments

The mixin needs 1 argument when you use it with include.

@include media-up($breakpoint)


A breakpoint key(name) from the $s-breakpoints config map.

All possibilities

We recommend to style with the mobile first approach. But there is other mixins available to target breakpoints down.

media-up media-down media-only