Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+3 votes
in Q2A Core by
reopened by
when i change the width of search box in the desktop version of snowflat theme, it impacts the search box of mobile version of snowflat theme.....

how to make changes to both versions of search box separately....(i mean modifying the width, height, button size)

1 Answer

+2 votes
selected by
Best answer

Indeed there is a weird mix of the searches, CSS classes and IDs in the theme. Something like this would do the magic:

/* Desktop one */
.qam-search.the-top .qa-search-field {
    background: red;

/* Mobile one */
.qam-search:not(.the-top) .qa-search-field {
    background: blue;
yeah,its working fine for background colours,but not for width

Also how can i move the search box right and left
It is working perfectly fine for the width as well. I'm using `width: 50px` and `width: 200px` in the other search bar and I see them differently.

The problem is not the attribute to set but rather the selector. Those selectors are the right ones. Double check. Or maybe a previous change is conflicting with this one (I think they shouldn't).

In order to align the search box it is better to apply a "margin-left"
The only thing i made is,

I moved the this->search()  from line 300 to 265 in order to move the search box of desktop version to main area

margin left works fine