Responsive desing - search bar query

Hi Guys,

I am testing some cool stuff with twitter bootsrap but got stuck in 1 issue…

I have made a test seach bar with bootstrap system according to responsive design system, but when I am trying to minimize my browser window size my search bar icon image in coming down.

here is the link of my page…

http://www.jetflightz.com/responsive-test/index.html

html:

           <form class="span5 form-inline topbar-search-container pp-search">
					<input class="span4 pp-search" type="text"placeholder="Search pureprofile" value="" />
					<button href="#" class="btn btn-info pp-search">
                   <i class="icon-search icon-white"></i></button>
				</form>

css:

.topbar-search-container{position:relative;top:8px;}

.pp-search input[type=‘text’]{height:22px;border:1px solid #cccccc;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;}

.pp-search button{height:30px;position:relative;left:-40px;-webkit-border-top-right-radius:7px;-webkit-border-bottom-right-radius:7px;-moz-border-radius-topright:7px;-moz-border-radius-bottomright:7px;border-top-right-radius:7px;border-bottom-right-radius:7px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;}

.btn .icon-search{
display:block;
text-indent:-9999px;
overflow:hidden;
width:17px;
height:16px;
}

.btn .icon-white{background:url(…/img/icon-search.png) no-repeat;}

Try removing display: block in you @media rule and change the width to something like 80%:

[COLOR="#0000FF"][s]display: block;[/s][/COLOR]
width: [COLOR="#FF0000"]80%[/COLOR];
min-height: 28px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

I tried it but its not working… I think I confused plz. suggest where exactly I should change my css… thanx…

Sorry, I should have given a file and line number. It’s in the bootstrap.css, around line 4263.

You can easily find line numbers by right-clicking Inspect Element in Chrome, Opera, Firefox and Safari.

Off Topic:

Yikes! That bootstrap file a lot of CSS for a simple page. [Runs to fetch a bucket …]