Last active
December 20, 2015 22:09
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*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