Menu icon Foundation
Full-width buttons using Mixins

Hi, i'm using foundation 4.3 (have not had the chance to upgrade yet:)) and i'm running into some issues with the variable $full-width. i'm trying to have full width buttons only on mobile and normal (width:auto(?)) on tablet/desktop.

  .select-store-footer {
    @include button();
    @include button-size($full-width:true);
    @media #{$small} {
      float: right;
      @include button-size($full-width:false);
    }
  }

.footer-container .select-store-footer {
  border-style: solid;
  border-width: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: normal;
  line-height: 1;
  margin: 0 0 1.25em;
  position: relative;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding-top: 0.625em;
  padding-right: 1.25em;
  padding-bottom: 0.6875em;
  padding-left: 1.25em;
  font-size: 1em;
  background-color: #de2c2c;
  border-color: #ba1d1d;
  color: white;
  padding-top: 0.625em;
  padding-right: 1.25em;
  padding-bottom: 0.6875em;
  padding-left: 1.25em;
  font-size: 1em;
  padding-top: 0.625em;
  padding-bottom: 0.6875em;
  padding-right: 0px;
  padding-left: 0px;
  width: 100%;
}
.footer-container .select-store-footer:hover, .footer-container .select-store-footer:focus {
  background-color: #ba1d1d;
}
.footer-container .select-store-footer:hover, .footer-container .select-store-footer:focus {
  color: white;
}
@media only screen and (min-width: 639px) {
  .footer-container .select-store-footer {
    float: right;
    padding-top: 0.625em;
    padding-right: 1.25em;
    padding-bottom: 0.6875em;
    padding-left: 1.25em;
    font-size: 1em;
  }
}
            

         

i could just do:

    	.button {
			width: 100%;
			margin-left: 0;
			@media #{$small} {
				width: auto;
				margin-left: 10px;
			}
		}

But why does the full-width option exist?

foundation 4.3buttonsmixin

Hi, i'm using foundation 4.3 (have not had the chance to upgrade yet:)) and i'm running into some issues with the variable $full-width. i'm trying to have full width buttons only on mobile and normal (width:auto(?)) on tablet/desktop.

  .select-store-footer {
    @include button();
    @include button-size($full-width:true);
    @media #{$small} {
      float: right;
      @include button-size($full-width:false);
    }
  }

.footer-container .select-store-footer {
  border-style: solid;
  border-width: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: normal;
  line-height: 1;
  margin: 0 0 1.25em;
  position: relative;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding-top: 0.625em;
  padding-right: 1.25em;
  padding-bottom: 0.6875em;
  padding-left: 1.25em;
  font-size: 1em;
  background-color: #de2c2c;
  border-color: #ba1d1d;
  color: white;
  padding-top: 0.625em;
  padding-right: 1.25em;
  padding-bottom: 0.6875em;
  padding-left: 1.25em;
  font-size: 1em;
  padding-top: 0.625em;
  padding-bottom: 0.6875em;
  padding-right: 0px;
  padding-left: 0px;
  width: 100%;
}
.footer-container .select-store-footer:hover, .footer-container .select-store-footer:focus {
  background-color: #ba1d1d;
}
.footer-container .select-store-footer:hover, .footer-container .select-store-footer:focus {
  color: white;
}
@media only screen and (min-width: 639px) {
  .footer-container .select-store-footer {
    float: right;
    padding-top: 0.625em;
    padding-right: 1.25em;
    padding-bottom: 0.6875em;
    padding-left: 1.25em;
    font-size: 1em;
  }
}
            

         

i could just do:

    	.button {
			width: 100%;
			margin-left: 0;
			@media #{$small} {
				width: auto;
				margin-left: 10px;
			}
		}

But why does the full-width option exist?

Seth Hall over 5 years ago

I am experiencing and wondering the same thing.

I guess manual override is the solution.

Lewis Dexter Litanzios almost 5 years ago

Hey,

Not sure if was in the codebase when you posted this, but try setting button-group-style's $even mixin argument:

ul {
    @include button-group-container($styles: true, $float: false);
    li {
        @include button-group-style($radius: false, $even: 2, $float: false, $orientation: horizontal);
    }
}

Regards,