Menu icon Foundation
Button group span and stack issue

I have a button group with two buttons.

I'd like when in medium size and upwards to show the two buttons with even-2, spanning the whole width of the container.

And when in small size to stack both buttons on top of each other but still have the buttons fill the container width.

The 'even' classes don't seem to be well documented (or if they are I cannot find the relevant docs) and I'm struggling.

Version 1 spans the whole width for medium upwards and stacks for small, but when stacked each button only spans half the container width:

Version 2 works perfectly for small, spanning the width of the container and stacking, but in medium upwards does not fill the container due to the lack of 'even'.

What I think I'm looking for is a "medium-up-even-2" or even "medium-even-2", "large-even-2" but none of those seem to exist.

Is it possible to combine even-N with stack-for-small and make those work together as I want?

<!-- Version 1 -->
<ul class="button-group stack-for-small even-2 radius text-center">
  <li>Button</li>
  <li>Button</li>
</ul>

<!-- Version 2 -->
<ul class="button-group stack-for-small radius text-center">
  <li>Button</li>
  <li>Button</li>
</ul>

Button Groupseven-2stack-for-smallbuttongroup

I have a button group with two buttons.

I'd like when in medium size and upwards to show the two buttons with even-2, spanning the whole width of the container.

And when in small size to stack both buttons on top of each other but still have the buttons fill the container width.

The 'even' classes don't seem to be well documented (or if they are I cannot find the relevant docs) and I'm struggling.

Version 1 spans the whole width for medium upwards and stacks for small, but when stacked each button only spans half the container width:

Version 2 works perfectly for small, spanning the width of the container and stacking, but in medium upwards does not fill the container due to the lack of 'even'.

What I think I'm looking for is a "medium-up-even-2" or even "medium-even-2", "large-even-2" but none of those seem to exist.

Is it possible to combine even-N with stack-for-small and make those work together as I want?

<!-- Version 1 -->
<ul class="button-group stack-for-small even-2 radius text-center">
  <li>Button</li>
  <li>Button</li>
</ul>

<!-- Version 2 -->
<ul class="button-group stack-for-small radius text-center">
  <li>Button</li>
  <li>Button</li>
</ul>
Spyros Fotiou over 4 years ago

I had a similar issue which I solved by adding the following to my CSS:

@media only screen and (max-width: 40em) {

.button-group>li {
width: 100% !important;
}

}

Hope it helps!