Search form width

[DARKF3D3]

I changed position on search form module placing on the top nav bar.

Testing website on different resolution i notice a problem with displays with low resolution (less than 400px). In fact the search bar has a minimun fixed width, that break the top nav layout, the problem is that i don't find this value anywhere.

It seem that there's no minimum value, but it's should be set somewhere because on low resolution the searchform maintain the same width.

[vekia]

you can define it with css styles

have you tried it?

 

for example

 

.search_query {min-width:400px;}

[DARKF3D3]

yes, but in that way i get a fixed with, i'm trying to fing a way to get a dinamic width that adapt the search form to the available space, because on low resolution there's few space.

[NemoPS]

Maybe it's missing a value in the responsive query, they should be in global.scss I assume, targeted like

 

max-width: $screen-xs - 1

[DARKF3D3]

I finally upgraded the store, so now you can see the problem on the signature link.

If you try to resize the window to less than 340-350pixel, you'll see that search form width break the topnav layout.

Edited September 10, 2014 by DARKF3D3 (see edit history)

[NemoPS]

You are referring to the smallest size you can get on a browser, correct? On a phone in portrait mode it displays fine, the search box is floated left

[DARKF3D3]

Yes exaclty, I haven't tested on a mobile phone with the same lower resolution because mine has rosolutions on 480px or 720px. So i thinked that on a mobile screen like 320px could appear the same has desktop, so with the search form below the topnav.

[NemoPS]

Try with a media query with max-width: 340px and set a new fixed width