How do i make the form field responsive?

Question

I have just started to learn django few weeks. To learn more effectively i have started to build a hotel website and deployed using heroku. The website seems better on mine laptop but looks worse on my ipad or mobile. I wanted to make the form fields reponsive using css or django crispy form. I have found a lot of answers but none of them help me understand how to do it. Also any further recommendation for the website would be recommended for me as a beginner in web development. Here is the website: https://hotel-jumera.herokuapp.com (Its mine practise for building website, so sorry for in case copyright issue) form field in template:

<form  method='post'>
    {% csrf_token %}
    {{booking_form.as_p }}
    <button type="submit" class="btn btn-success"> Send </button>
</form>

Answer 1

What you want to do is set some break points in your css where you can change the width of elements on your site

@media only screen and (min-width: 400px) {
  .col-2 {
      background-color: red;
  }
}

If the browser window is 600px or bigger, the background color will be red. This is a mobile first approach. You build your site for mobile and then add breakpoints to cater for larger screens tablet min-width: 600px and desktop min-width: 1200px