
Visibility SASS
show-for-XXX
You are on a small screen or larger.
You are on a medium screen or larger.
You are on a large screen or larger.
You are on a xlarge screen or larger.
show-for-XXX-only
You are definitely on a small screen.
You are definitely on a medium screen.
You are definitely on a large screen.
hide-for-XXX
hide-for-XXX-only
hide or invisible
Can’t touch this.
Can sort of touch this.
.hide { display: none !important; } .invisible { visibility: hidden; } @media screen and (max-width: ($breakpoint-medium - 1px)) { .show-for-medium-up, .show-for-medium { display: none !important; } } @media screen and (max-width: ($breakpoint-large - 1px)) { .show-for-large-up, .show-for-large { display: none !important; } } @media screen and (max-width: ($breakpoint-xlarge - 1px)) { .show-for-xlarge-up, .show-for-xlarge { display: none !important; } } @media screen and (max-width: 0), screen and (min-width: $breakpoint-medium) { .show-for-small-only { display: none !important; } } @media screen and (max-width: ($breakpoint-medium - 1px)), screen and (min-width: $breakpoint-large) { .show-for-medium-only { display: none !important; } } @media screen and (max-width: ($breakpoint-large - 1px)), screen and (min-width: $breakpoint-xlarge) { .show-for-large-only { display: none !important; } } @media print, screen and (min-width: $breakpoint-medium) { .hide-for-medium-up, .hide-for-medium { display: none !important; } } @media print, screen and (min-width: $breakpoint-large) { .hide-for-large-up, .hide-for-large { display: none !important; } } @media print, screen and (min-width: $breakpoint-xlarge) { .hide-for-xlarge-up, .hide-for-xlarge { display: none !important; } } @media screen and (max-width: ($breakpoint-medium - 1px)) { .hide-for-small-only { display: none !important; } } @media screen and (min-width: $breakpoint-medium) and (max-width: ($breakpoint-large - 1px)) { .hide-for-medium-only { display: none !important; } } @media screen and (min-width: $breakpoint-large) and (max-width: ($breakpoint-xlarge - 1px)) { .hide-for-large-only { display: none !important; } }