Responsive

Responsive shows or hides elements depending on the size of the screen.

Class Properties
.is-only-mobile @media #{$break2open} { display: none!important; }
.is-only-tablet @media #{$break1}, #{$break3open} { display: none!important; }
.is-only-desktop @media #{$break1}, #{$break2} { display: none!important; }
.is-not-mobile @media #{$break1} { display: none!important; }
.is-not-desktop @media #{$break3open} { display: none!important; }

I’m visible on mobile

I’m visible on tablets

I’m visible on desktop

I’m visible on tablets & desktops

I’m visible on mobile & tablets

<p class="is-only-mobile">I’m visible on mobile</p>
<p class="is-only-tablet">I’m visible on tablets</p>
<p class="is-only-desktop">I’m visible on desktop</p>
<p class="is-not-mobile">I’m visible on tablets &amp; desktops</p>
<p class="is-not-desktop">I’m visible on mobile &amp; tablets</p>