Menu icon Foundation
Make button class use extend when mobile?

Is there a way to make a "button" add "extend" or act like that when it goes mobile? Right now my buttons just look like staggered bricks but I'd rather see them stretch out on their own rows when mobile.

buttonextendmobile

Is there a way to make a "button" add "extend" or act like that when it goes mobile? Right now my buttons just look like staggered bricks but I'd rather see them stretch out on their own rows when mobile.

Erik Krause over 5 years ago

Add expand class to the button, control width by putting them in a column and specify width using "small-12 medium-4 columns" f.e.

If you want to behave them normal at larger sizes, put
CSS
@media only screen and (max-width: 40em) {
button.small-expand, .button.small-expand {
padding-left: 0;
padding-right: 0;
width: 100%;
}
}

in your CSS file, adjust the max width to your liking and assign the class small-expand to your buttons.