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 {
  position:relative;

  @include media-up(md) {
    position:absolute;
    // your content here
  }
}

Mixin arguments

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

@include media-up($breakpoint)

$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