Hi!
In this case, you can use the @media query css selectors. These will help you to determine the screen width aka. separate the mobile phone width from desktop. In this case you can change the width of the search + add any other rules you want. I guess the text by the search and the search is in a floating div element, which instead of making new lines, they are placed next to each other. To sum up everything, you can use something like this:
/* Regular pc & others */
#ajaxsearchprowidget-4 {
width: 486px !important;
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-device-width : 350px)
and (max-device-width : 600px) {
#ajaxsearchprowidget-4 {
width: 265px !important; /* Was originally 486px */
float: none;
margin: 0 auto;
}
}
The “float: none;” property should place the search in a new line and the “margin: 0 auto;” should place it to the middle. With this code you can have different search width depending on the screen size. Please note, that I can’t test these codes, I’m just hoping it helps.