Skip to content

Instantly share code, notes, and snippets.

@rafibomb

rafibomb/responsive-expand-buttons

Created September 27, 2017 21:54
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save rafibomb/2497ca75ceedfa3f5ccf3ba146eae295 to your computer and use it in GitHub Desktop.
Save rafibomb/2497ca75ceedfa3f5ccf3ba146eae295 to your computer and use it in GitHub Desktop.
Download ZIP
These are responsive classes for expanded buttons.
Raw
responsive-expand-buttons
@media screen and (max-width: 39.9375em) {
.button.small-only-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0; } }
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
.button.medium-only-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0; } }
@media screen and (max-width: 63.9375em) {
.button.medium-down-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0; } }
@media print, screen and (min-width: 40em) {
.button.medium-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0; } }
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
.button.large-only-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0; } }
@media screen and (max-width: 74.9375em) {
.button.large-down-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0; } }
@media print, screen and (min-width: 64em) {
.button.large-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment