bootstrap input-group not responsive - html

Question

I'm having a problem with the input-group on my site not sizing down for xs screen sizes.
Here's the code:
<div class="gradient">
<div class="container">
<div class="row">
<div class="col-xs-1 col-s-1 col-m-2"></div><!-- /left column -->
<div class="col-xs-10 col-s-10 col-m-8">
<h1>IS IT ON NETFLIX?</h1>
<p>Search to see if your TV show or movie is available to stream on Netflix</p>
<div class="input-group searchbox">
<input type="text" id="searchInput" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button id="submit" class="btn btn-default" type="button">Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /middle column -->
<div class="col-xs-1 col-s-1 col-m-2"></div><!-- /right column -->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /gradient -->
The site is isitonnetflix.net. Thanks so much!!

Answer 1

Wrapping the image tag with an aligned div:
<div class="" align="center"></div>
could help with it being able to sit in the middle of the div, but you could also:
<img src="" align="middle" alt="">
you could definitely change those values and it might be kind of gross to do that, but it might help.

Answer 2

Figured it out. Changed width on the searchbox class to 80%. Fixed!

Answer 3

You can also facilitate bootstraps media queries in a way that .searchbox is defined as:
.searchbox {
border-radius: 5px;
height: 50px;
margin: 0 auto;
padding-top: 20px;
/* width: 300px; */
}
without stating its width explicitly for Xtra Small sizes you'll see it fixes too. Another solution would be to set max-width instead of width:
.searchbox {
border-radius: 5px;
height: 50px;
margin: 0 auto;
padding-top: 20px;
max-width: 300px;
}