CODEWITHSUNDEEP
buttonsasszurb-foundation
totallytotallyamazing
totallytotallyamazing

Reputation: 2923

Zurb Foundation 5 - making buttons responsive

In Zurb Foundation 5 - How can I responsively switch to the smaller button style when the browser is resized smaller or on a smaller screen?

A similar question was asked and answered on StackOverFlow here but that correct solution does not work with Foundation 5, guessing it only works in Foundation 4.

The buttons currently look like this ($button-lrg) when resized to a smaller screen: enter image description here

But I want the buttons to look more like this ($button-sml) when resized to a smaller screen: enter image description here

Any help would be greatly appreciated!

I came up with a sass/scss mixin based off of the correct answer from the similar question link above. Just add the following mixin to your "app.scss" file:

@media #{$small-up} { 
    .responsive-button {
        @include button($button-sml, $primary-color, 0px, false, false, false); 
    }
}

@media #{$medium-up} {
    .responsive-button {
        @include button($button-lrg, $primary-color, 0px, false, false, false); 
    }   
}

Upvotes: 1

Views: 597

Answers (1)

JAre
JAre

Reputation: 4756

You can achieve it with visibility classes:

<div class="show-for-medium-up">
    <a href="#" class="button large alert">Button 1 </a>
    <a href="#" class="button large ">Button 2</a>
</div>
<div class="hide-for-medium-up">
    <a href="#" class="button tiny  alert">Button 1 </a>
    <a href="#" class="button tiny ">Button 2</a>
</div>

http://jsfiddle.net/Ltamvrc7/

Foundation devs used this technique on their site.

Upvotes: 1

Related Questions