Buttons not Horizontally Aligning for Mobile

Question

I have two buttons and they horizontally align perfectly for desktop, but they don't for mobile. I am also using MaterializeCSS if that matters.

Here is the relevant code:

html {
    --global-color: white;
    --global-color-invert: black;
    --background-color: white;
    --not-current-screen: lightgray;
    --current-screen: black;
    --padding-of-side: 0%;
    --padding-bottom: 5%;
    --margin-left: 15%;
    --margin-right: 15%;
    --padding-left: 0%;
    --padding-right: 0%;
}

html[data-theme="dark"] {
    --global-color: black;
    --global-color-invert: white;
    --background-color: #1A1B1C;
    --not-current-screen: #787878;
    --current-screen: white;
}

@media screen and (min-device-width: 0px) and (max-device-width: 600px) {
    html {
        --padding-of-side: 20%;
        --padding-bottom: 3%;
        --margin-left: 2%;
        --margin-right: 2%;
        --padding-left: 1%;
        --padding-right: 1%;
    }
    
}

.not_current_screen {
    color: var(--not-current-screen);
    border-left: 1.5px solid var(--not-current-screen);
    padding-left: var(--padding-of-side);
    margin-top: 2px;
}

.current_screen {
    color: var(--current-screen);
    border-left: 1.5px solid var(--current-screen);
    padding-left: var(--padding-of-side);
    margin-top: 2px;
}

body {
    background-color: var(--background-color);
    color: var(--global-color-invert)
}

label > span {
    color: var(--global-color-invert)
}

input[type="checkbox"] {
    border: 2px solid var(--global-color-invert) !important;
}

.padded_div {
    border: 1px solid var(--global-color-invert); 
    border-radius: 5px; 
    padding-top: 1%; 
    padding-bottom: var(--padding-bottom); 
    margin-left: var(--margin-left); 
    margin-right: var(--margin-right); 
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
    text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div id="appMain" class="padded_div">
    <h5>Please Agree to These Terms and Conditions:</h5>
    <div class="row">
        <div class="col s2">
            <div>
                <ul>
                    <li class="current_screen">Terms and Conditions</li>
                    <li class="not_current_screen">Patient Info</li>
                    <li class="not_current_screen">Suggested Symptoms</li>
                    <li class="not_current_screen">Symptoms</li>
                    <li class="not_current_screen">Diseases</li>
                </ul>
            </div>
        </div>
        <div class="col s8">
            <br>
            <ul style="text-align: center; list-style-position: inside;" class="browser-default">
                <li>This is not a replacement for doctors.</li>
                <li>This app may not be completely accurate.</li>
                <li>Do not use this to actually check symptoms for patients.</li>
                <li>This is a demo, we are non-liable.</li>
            </ul>
            <br>
            <br>
            <label style="text-align: center;">
                <input type="checkbox" class="filled-in" />
                <span>I understand</span>
            </label>
        </div>
    </div>
    <br>
    <button style="margin-right: 33%" id="back" class="waves-effect waves-light btn">Back</button>
    <button style="margin-left: 33%" id="next" class="waves-effect waves-light btn disabled" onclick="moveToPage(2)">Next</button>
    <script>
        var checkbox = document.querySelector("input[type=checkbox]");

        checkbox.addEventListener('change', function() {
            if (this.checked) document.getElementById("next").classList.remove("disabled");
            else document.getElementById("next").classList.add("disabled");
        });
    </script>
    </div>

Image showing broken on mobile:

If you want the website url, here: https://healthhacks2021.herokuapp.com/

Answer 1

Put the buttons into SPAN, remove margins (that I think that are the problem) then encapsulate in a DIV, then set flex to it, just like this:

<div class="mybuttons">
    <span><button id="back" class="waves-effect waves-light btn">Back</button></span>
    <span><button id="next" class="waves-effect waves-light btn disabled" onclick="moveToPage(2)">Next</button></span>
</div>

And in CSS file:

.mybuttons {
    display: flex;
    justify-content: space-between;
    text-align: left;
}

.mybuttons:last-child {
    text-align: right;
}

Your buttons will show aligned without using margins. Maybe is not elegant... but will do.

Answer 2

Take off the margin-right:33% for the left button and margin-left:33% for the right button on mobile breakpoints and they will be side by side.