Не могу подогнать кнопку в нужное место при определенном разрешении монитора, имеется такой код формы поиска, HTML:
<div class="search-box">
<form id="quicksearch" method="post">
<input type="hidden" name="do" value="search" />
<input type="hidden" name="subaction" value="search" />
<div class="search-field">
<input id="story" name="story" placeholder="Поиск..." type="text" />
<button type="submit" class="btn-login" style="border:0px; padding: 0px; top: 0px; left: 230px;"><span class="fa fa-search"></span></button>
</div>
</form>
</div>введите сюда код
CSS:
.search-box {width:280px;}
.search-field {width:100%; position:relative;}
.search-field input, .search-field input:focus {width:100%; padding:0 100px 0 10px; border-radius:23px;
background-color:#fff; color:#333; height:40px; line-height:40px; box-shadow:inset 0 0 0 1px #e3e3e3;}
.search-box button {position: absolute;}
получается все хорошо, как на картинке ниже:
а когда пытаюсь уменьшить по размерам поле для мобильных, вот так:
@media screen and (max-width: 470px) {
.search-box {width:180px;}
}
то поле ввода уменьшается, а кнопка остается на месте и выходит за пределы видимости экрана:
я пытался добавить в @media
1) .search-box button{top: 0px;left: 130px;}
2) .search-box btn-login{top:0px;left: 130px;}
3) .btn-login search-box {top: 0px;left: 130px;}
4) .button search-box {top: 0px;left: 130px;}
ничего не получилось, кнопка не сдвигилась с места и оставалась за зоной видимости, подскажите, что нужно прописать в медиа запрос чтоб кнопка переместилась на нужную позицию?