how to make materializecss buttons stack nicely on small screens

Question

I am doing a simple project to practice with materializecss framework, and I a have come across this problem.

The buttons when in a small screen don't stack up nicely:

On a bigger screen they look good side by side:

I have this code in my index.html

    <div class="row">
    <div class="col s12 m8 offset-m2 l6 offset-l3 xl4 offset-xl4">
        <a type="button" class="btn waves-effect waves-light left" >remove selected</a>
        <a class="btn waves-effect waves-light right" >remove all<i class="material-icons right">delete</i></a>
    </div>
</div>

Can it be fixed using only the framework tags? I wouldn't want to create a custom CSS for it.

Answer 1

Try this instead:

<div class="col s12 m8 offset-m2 l6 offset-l3 xl4 offset-xl4">

    <a type="button" class="col s5 btn waves-effect waves-light left" style="padding:0;">remove selected</a>

    <a class="col s5 offset-s2 btn waves-effect waves-light right" >remove all<i class="material-icons right">delete</i></a>

</div>

This should work nicely with mobile resolution. If you have some problem with desktop resolutions or higher then tell me here or post you whole HTML.

EDIT: As asked by you, the following code might help you with some things. Obviously you will have to make many changes according to your needs. But I hope that this can guide you.

<div class="row">
    <div class="input-field col s12 m8 offset-m2 l6 offset-l3 xl4 offset-xl4">
        <input placeholder="Placeholder" id="first_name" type="text" class="validate">
        <label for="first_name">First Name</label>
    </div>
</div>
<div class="row hide-on-med-and-up">
    <div class="col s12 m8 offset-m2 l6 offset-l3 xl4 offset-xl4">
        <div class="row">
            <a type="button" class="col s12 btn waves-effect waves-light left" style="padding: 0;">remove selected</a>
        </div>   
        <div class="row">
            <a class="col s12 btn waves-effect waves-light right" >remove all<i class="material-icons right">delete</i></a>
        </div>
    </div>
</div>
<div class="row hide-on-small-only">
    <div class="col s12 m8 offset-m2 l6 offset-l3 xl4 offset-xl4">
        <a type="button" class="col s5 btn waves-effect waves-light left" style="padding: 0;">remove selected</a>
        <a class="col s5 offset-s2 btn waves-effect waves-light right" >remove all<i class="material-icons right">delete</i></a>
    </div>
</div>

By using offsets , rows , container , grid etc, using can achieve most of the things you want.

But I must add: Although by using frameworks like materializecss, the need for your own css is very unlikely, sometimes you might just need it.

Hope this helps. Thanks.