How can I center align(responsive) materialize forms for Django?

Question

This form is not responsive and doesn't change it's size on changing the browser size. Half of the form goes out of the card.

<div class="row valign">
    <div class="col s12 m8 offset-m2 l8 offset-l2">
        <div class="card">
<form method="POST" >

        {% csrf_token %}
        {% form form=form %}{% endform %}

      <div style="text-align:center">
          <a href="#!" class="btn waves-effect waves-red z-depth-5"  onclick="Materialize.toast('Thank You!', 4000, 'rounded')">SUBMIT</a>
</div>

    </div>
</div>
</div>

Answer 1

I'm guessing your wanting to center both horizontally and vertically. For this I personally recommend you to use flex in your css. If you don't have a css file this is the first thing you will need to get setup. Checkout this Question here for a comprehensive answer about doing this in Django. Setting up django for css file

CSS

.card {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card form {
    max-width: 100%; /* Handles the responsive part, it will cause your form to scale with a max-width of 100% */
}

Checkout this guide on flexbox created by Chris at CSS Tricks. Its great and covers everything you need to know about centering. https://duckduckgo.com/?q=complete+guide+to+centering+css