Reply To: Ajax Search Pro field keeps physically shrinking in length

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Ajax Search Pro field keeps physically shrinking in length Reply To: Ajax Search Pro field keeps physically shrinking in length

#854
Ernest Marcinko
Ernest Marcinko
Keymaster

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.

Best,
Ernest Marcinko

If you like my products, don't forget to rate them on codecanyon :)