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.

1 Answer 1


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 and acknowledge you have read our privacy policy.