I have implemented a search form on my website with a button inside the text box. It works fine on desktop, but when I switch to mobile view, the positioning is off. I am currently using absolute positioning for the button to give it a fixed position. Is there a way to make this work properly on mobile as well?
Here is the HTML code:
<!-- Search form -->
<div class="col-md-3 col-xs-12">
<form class="form-inline" role="search">
<div class="form-group">
<input type="text" class="form-control search-input" size="40" placeholder="Search the site...">
<input type="submit" value="" class="search-button" id="searchsubmit">
</div>
</form>
</div>
And here is the CSS code:
.search-button {
background: url('../images/search-btn.png') right no-repeat;
border: 0px solid black;
border-left: none;
cursor: pointer;
height: 35px;
width: 35px;
position:absolute;
left:241px;
top: 3px;
}