Все элементы div являются адаптивными, за исключением одного конкретного элемента div на устройствах Chrome и Samsung, и все элементы div отлично работают в Firefox и IOS

Question

Я не могу понять, почему.Кто-нибудь может помочь?

У меня есть несколько элементов div в моем файле HTML , и все они отзывчивы.За исключением элемента * строка поиска .Может кто-нибудь дать мне решение, почему панель поиска не не реагирует ?

Соответствующий HTML & CSS

.search-form .search-input-bar .input-group {
  width: 600px;
  max-width: 100%;
  !important;
  color: #939598;
  margin-left: auto;
  margin-right: auto;
}

.search-form .search-input-bar .input-group .search-btn {
  background-color: #f26522;
  color: #fff;
  border-radius: 5px;
  border: none;
}

.search-form .search-input-bar .input-group .singlesearch {
  background: transparent;
  border: 3px solid #0033a0;
  border-radius: 10px;
  font-size: 18px;
}

.search-form .search-input-bar .input-group .singlesearch {
  margin-left: 0;
  height: 44px;
}

.input-group .inner-addon {
  position: relative;
}

.input-group .inner-addon .addon {
  position: absolute;
  padding: 6px;
}

.input-group .inner-addon .input-box {
  z-index: 0;
}

.input-group .inner-addon.right-addon .addon {
  right: 0;
}

.input-group .inner-addon.right-addon .input-box {
  padding-right: 50px;
}

<div class=" search-input-bar">
  <div class="input-group">
    <div class="inner-addon right-addon">
      <input id="searchfield" name="testt" class="form-control singlesearch input-box" type="text" value="test" placeholder="test">
      <div class="addon">
        <button id="searchbutton" class="btn btn-default search-btn" type="button">Go</button>
      </div>
    </div>
  </div>
</div>

Answer 1

Спасибо всем.Я решил это, добавив следующее в мой CSS.

@media only screen and (max-width : 651px) {
     .search-form .search-input-bar .input-group {
       width: 600px;
       color: black;
     }
 }
 @media only screen and (max-width : 640px) {
     .search-form .search-input-bar .input-group {
       width: 550px;
     }
 }
 @media only screen and (max-width : 605px) {
     .search-form .search-input-bar .input-group {
       width: 500px;
     }
 }
 @media only screen and (max-width : 559px) {
     .search-form .search-input-bar .input-group {
       width: 450px;
     }
 }
 @media only screen and (max-width : 528px) {
     .search-form .search-input-bar .input-group {
       width: 400px;
     }
 }
 @media only screen and (max-width : 456px) {
     .search-form .search-input-bar .input-group {
       width: 350px;
     }
 }
 @media only screen and (max-width : 409px) {
     .search-form .search-input-bar .input-group {
       width: 300px;
     }
 }

Answer 2

Это происходит потому, что вам нужно установить max-width для input

.search-form .search-input-bar .input-group {
  width: 600px;
  max-width: 100%;
  color: #939598;

  margin-left:auto;
  margin-right:auto;
}
.search-form .search-input-bar .input-group .search-btn {
  background-color: #f26522;
  color: #fff;
  border-radius: 5px;
  border: none;
}
.search-form .search-input-bar .input-group .singlesearch {
  background: transparent;
  border: 3px solid #0033a0;
  border-radius: 10px;
  font-size: 18px;
}
.search-form .search-input-bar .input-group .singlesearch {
  margin-left: 0;
  height: 44px;
}

.input-group .inner-addon {
  position: relative;
}
.input-group .inner-addon .addon {
  position: absolute;
  padding: 6px;
}
.input-group .inner-addon .input-box {
  z-index: 0;
}
.input-group .inner-addon.right-addon .addon {
  right: 0;
}
.input-group .inner-addon.right-addon .input-box {
    padding-right: 50px;
    box-sizing: border-box;
    max-width: 100%;
}

<div class=" search-input-bar">
    <div class="input-group">
        <div class="inner-addon right-addon">
            <input  id="searchfield" name="testt" class="form-control singlesearch input-box" type="text" value="test" placeholder="test">
            <div class="addon">
                <button id="searchbutton" class="btn btn-default search-btn" type="button">Go</button>
            </div>
        </div>
    </div>