Hi!
Well, it’s a theme/implementation related problem, but I can give you suggestions of course.
1. Yes, on the Frontend Search Settings -> General panel, first option: http://i.imgur.com/toueGGG.png
2. In that case I would do one of the following:
i.) Use a media query to adjust the width and the position on mobile devices. For example:
[html] @media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
div.et_search_outer {
width: 280px;
}
}[/html]
ii.) or maybe use the compact layout mode: Compact layout in the documentation
iii.) Another possible solution is a mixture of the previous two: use the current search instance on desktop and make another one for mobile, with the compact layout. In that case, I would use this CSS to hide the first one on mobile, and the second one on desktop:
[html]@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
div[id*=’ajaxsearchpro1_’] {
display: none !important;
}
div[id*=’ajaxsearchpro2_’] {
display: inline-block !important;
}
}
@media only screen
and (min-device-width: 481px) {
div[id*=’ajaxsearchpro1_’] {
display: block !important;
}
div[id*=’ajaxsearchpro2_’] {
display: none !important;
}
}[/html]
In my opinion these are the best possible solutions.