Menu icon Foundation
Buttons: class expand overwrites class small

Hi,

i want to use the class small and expand together in a button, but if i do that, the css for the small-class will be overwritten. The font-size is no longer small. By removing the expand-class from the button, the font size is small and works correct. Is there a way to do that? For now i added a custom full-width class but perhaps there is something integrated in the framework?

buttonssmallexpand

Hi,

i want to use the class small and expand together in a button, but if i do that, the css for the small-class will be overwritten. The font-size is no longer small. By removing the expand-class from the button, the font size is small and works correct. Is there a way to do that? For now i added a custom full-width class but perhaps there is something integrated in the framework?

Rafi Benkual about 4 years ago

Can you share us an example of this so we can help you see what's happening?

Blank codepen - http://codepen.io/rafibomb/pen/MaJXov?editors=110

Alex about 4 years ago

Hi,

i tried in in codepen and there it works:

http://codepen.io/axelf/pen/wKgQMe?editors=110

But you can try it here (and thats the same behavior i have):
http://foundation.zurb.com/docs/components/buttons.html

If you change the HTML for the Expanded Button with Firebug or Dev Tools and add the small class, the font size won't change. By removing the expand class, the font size changes.

This is the CSS from Codepen

button.expand, .button.expand {
padding-left: 0;
padding-right: 0;
width: 100%;
}

and this is my local CSS

button.expand, .button.expand {
font-size: 1.14286rem;
padding: 1.14286rem 1.14286rem 1.21429rem;
width: 100%;
}

I think i have an error, but don't know the reason for the error.