I have a protostar template that I customize myself from time to time using css.

It looks fine in a web browser and big tablets; although it isn't a major problem, when the window size or being viewed on a small resolution device the search bar itself doesn't stay consistent in it's width compared to everything else.

The search bar itself has loads of hidden margins & padding, and also a 90% width, but I don't know how I can make it stay the same width (as the menu as a reference) or at least have it float in the centre of the resolution when it goes into mobile view.


I don't want my website name to appear in search engines so I linked it this way.


In your CSS file, go to line 7312, where you will see the following code:

.header-search .search-query {
    width: 90%;

Replace it all with the following:

.header-search .search-query {
    box-sizing: border-box;
    height: 30px;
    width: 100%;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.