Searchfield is too small – CSS issue

Hi,

You are welcome!

From what I can see the search box is embedded within the wrong element. It’s inside the
[code]<div class="fusion-logo">…[/code]
which is set to a maximum width of 150 pixels on mobile screens, which is causing the “shift” and the small input.

I believe you should rather try placing exactly after that element and try the following additional custom css to give it the correct behavior:

[html]#ajaxsearchpro1_1 {
display: inline-block !important;
max-width: 400px !important;
}[/html]

This will make sure that the search container nicely “jumps” next to the logo on bigger screens, but not exceed a certain width ( in this case 400 pixels) . At the same time the line breaks on the mobile screens and the search gets displayed below the logo nicely.

I didn’t try this yet, but I hope it will help.

Hi,

The search bar is still within the fusion-logo element.

I believe you should rather try placing exactly after that element..

You can contact him, but you might wait for a long time for an answer.

I think we can solve it quicker. How about trying this custom CSS:
[code]
.asp_main_container {
min-width: 300px;
width: 100% !important;
float: right;
margin-left: 20px !important;
max-width: 360px;
}

@media only screen and (max-width: 360px) {
.asp_main_container {
margin-left: 50% !important;
}
}[/code]

Great!

It’s because the theme element in which is it placed now is not displayed on mobile devices. Try fixing it with:

[code].fusion-header-tagline {
min-width: 300px !important;
display: block !important;
}[/code]