Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
These are responsive classes for expanded 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
You can’t perform that action at this time.