Menu icon Foundation
How to remove some class for small media?

Hi, All. How to remove or ignore class "tiny"(for example) on buttons when screen equal to "small"(for example) class?

I can use standard js events (document.ready and window.resize) and just remove class using jQuery. But maybe is there more simple way to do this?

<div id="headerbuttons" class="large-3 medium-3 columns">
    <ul class="stack-small button-group">
        <li><a href="#" class="button tiny">This is a button</a></li>
        <li><a href="#" class="button tiny">This is a button</a></li>
    </ul>
</div>

classbuttontinyremovescreensmall

Hi, All. How to remove or ignore class "tiny"(for example) on buttons when screen equal to "small"(for example) class?

I can use standard js events (document.ready and window.resize) and just remove class using jQuery. But maybe is there more simple way to do this?

<div id="headerbuttons" class="large-3 medium-3 columns">
    <ul class="stack-small button-group">
        <li><a href="#" class="button tiny">This is a button</a></li>
        <li><a href="#" class="button tiny">This is a button</a></li>
    </ul>
</div>

This post has been closed. No new replies can be added.

Rafi Benkual almost 4 years ago

I would just use a media query for this to adjust the padding on small:
http://codepen.io/rafibomb/pen/RWwVpz?editors=110

Ivan Shumilov almost 4 years ago

Thank you, Rafi, that's exactly what I need