Squashed панель поиска в мобильном представлении

Question

У меня есть следующая строка поиска, и при просмотре на мобильном телефоне она сдавливается. Любая идея, как я могу это исправить, пожалуйста?

<div id="menu" class="py-4 d-flex justify-content-center">
            <div class="row ">
                <div class="col-sm-auto ">


                    <div class="input-group">
                    <span style="color:black" class="input-group-addon form-control">
                    <select id="selection" onchange="getValues(this.value)">
                        <option>Choose Category</option>
                        <option>Notary</option>
                        <option>Deed Date</option>
                        <option>Person</option>
                        <option>Place</option>
                        <option>Manuscript Reference</option>
                        <option>Subject</option>
                    </select>
                    </span>
                        <input id="search" type="text" class="form-control" name="search" placeholder="Choose a category" disabled=true>
                        <button class="btn btn-default" type="button" id="searchButton" onclick="doSparql(this.value)"   style="border-width: 1px; border-color: lightgray;"><span class="fa fa-search"></span></button>
                    </div>
                </div>
            </div>
        </div>

Answer 1

Вы должны изменить стиль в мобильном размере, например:

@media only screen and (max-width: 768px) {
  // style in mobile size, for example show select and span in two line
}