Zurb Foundation: How to make buttons smaller in size on a smaller screen?

Question

Is there a way in Zurb Foundation 4 to automatically switch to a smaller button style when the browser size is smaller or smaller on the smaller screen?

For example, when the screen is a standard desktop screen, do the following:

<a href="#" class="primary button">Button 1</a> 

If the screen size is smaller, do the following:

 <a href="#" class="small primary button">Button 1</a> 

I have a group of buttons of 6 buttons in a horizontal row and you want to use a small class of buttons when the screen size is smaller and the environment class when the screen is “standard”, is this possible?

Answer 1

This can be achieved with Sass / Scss mixins and media queries. In your app.scss application:

 $medium-up: "only screen and (max-width:"#{$small-screen}")"; @media #{$small} { .responsive-button { @include button($button-lrg, $primary-color, 0px, false, false, false); } } @media #{$medium-up} { .responsive-button { @include button($button-sml, $primary-color, 0px, false, false, false); } } 

Just use the .responsive-button class we just created. Here is an example:

 <div class="row"> <div class="small-8 large-8 columns"> <ul class="button-group round"> <li><a href="" class="responsive-button">Lorem</a></li> <li><a href="" class="responsive-button">Qui</a></li> <li><a href="" class="responsive-button">Voluptatibus</a></li> </ul> </div> <div class="small-4 large-4 columns"> <p>Lorem ipsum dolor sit amet.</p> </div> </div> 

This can be applied to any of the other Sass mixins described in the Zurb Foundation Official Documentation . View media queries and scroll to the end.