Как сделать кнопку поиска отзывчивой?

Question

Мой веб-сайт не отображается правильно, потому что кнопка поиска не отвечает. Если вы хотите увидеть вживую, вот сайт

https://emeupci.com

Я пытался col-md-4 col-lg-2, но это не сработало.

Вот HTML-код моей кнопки поиска

  <div class="container-fluid headerimage" style="padding:0 !important">
                  <div class="col-md-12" style="padding:0 !important;">
                      <img class="img-fluid" src="{% static 'users/img/map.png' %}" alt="map" width="1200" height="500">
                       <div class="dropdown col-md-4 col-lg-2"  style="position: absolute; top: 170px; left: 390px;">
                           <button  onclick="myFunction()"
                                    class="dropbtn btn btn-primary btn-block dropdown-toggle col-md-4 col-lg-2"
                                    style=" border: 26px solid #f9f9f9;
                                         cursor: pointer; 
                                         font-weight: bold; background-color: #447193;
                                         color: white; padding: 8px; border-radius: 0px;
                                         font-size: 16px;);">Search for a church
                           </button>
                       <div id="myDropdown" class="dropdown-content">
                           <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
                           {% for country in country %}
                            <a href="{% url 'users:cities' country.pk %}">{{country.country}}</a>
                           {% endfor %}
                      </div>
                      </div>

Я хочу, чтобы кнопка также уменьшалась при уменьшении размера браузера или при открытии сайта на мобильном телефоне.