how to modify the search box of snowflat desktop theme without affecting the searchbox of mobile theme?

Question

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)

Answer 1

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;
}

Comments

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