Responsive Search box

[Bhupendra]

Bhupendra

September 4, 2014 at 10:33 am

Hello How are you?

I am trying to add a search box in home page and i edited the css so its width is as wide as body content. The problem is it is not responsive. Only works with desktop view. When i viewed in smaller device like mobile. The search box width goes all the way wide. Here is the css i used in advanced setting of theme menu.

.form-search .search-query {
width: 489%;
height: 60px;
border: none;
padding: 10px 10px 10px 90px;
font-size: 18px;
font-weight: 400;
color: #4c4c4c;
background-color: #ffffff;
border: 2px solid;
border-color: #2a3a48;
}
textarea:focus, input[type=text]:focus, input[type=password]:focus,
input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=date]:focus,
input[type=month]:focus, input[type=time]:focus, input[type=week]:focus,
input[type=number]:focus, input[type=email]:focus, input[type=url]:focus,
input[type=search]:focus, input[type=tel]:focus, input[type=color]:focus {
border-color: rgba(33, 158, 255, .8);
outline: 0;
outline: thin dotted 9;
-webkit-box-shadow: 0 0 8px rgba(200, 200, 200, .6);
-moz-box-shadow: 0 0 8px rgba(200, 200, 200, .6);
box-shadow: 0 0 8px rgba(200, 200, 200, .6);
}
.form-search .search-icon {
width: 85px;
height: 60px;
color: #da1809;
font-size: 40px;
padding: 5px 5px 5px 10px;
}

I Know i have set the width to 489% and responsive is 100% but when i put 100% it will not be as wide as the body content. I know this css sets the search form as in whole in all page and thats ok coz i will be using different search form for other pages. I don’t know how to pull this off!. Could you able to help me on this please since i couldn’t find anything in the internet either. Thank you.