Skip to content

Instantly share code, notes, and snippets.

@pensierinmusica
Last active December 20, 2015 22:09
Show Gist options
  • Save pensierinmusica/6202494 to your computer and use it in GitHub Desktop.
Save pensierinmusica/6202494 to your computer and use it in GitHub Desktop.
A super lightweight library to show and hide elements on HTML based on responsive design.
/*CSS Responsive design show-hide*/
/*
USAGE
The class "res" has two modes, "show" and "hide".
The intended direction is from a larger to a smaller device.
Assign the class "res-show" to any HTML tag when you want the wrapped content
to be hidden on larger devices and shown on smaller ones.
Assign the class "res-hide" to any HTML tag when you instead want
the wrapped content to be shown on larger devices and hidden on smaller ones.
Define "max-width" based on the limit that suits your needs (standard 600px),
or add extra rules as you deem necessary.
*/
/*© Alessandro Zanardi - MIT license
(http://gist.github.com/pensierinmusica/6202494)*/
.res-show {
display: none;
}
@media (max-width: 600px) {
.res-show {
display: inline;
}
.res-hide {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment