Reply To: Positioning Search Box on Homepage

[Ernest MarcinkoKeymaster]

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: https://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:

      @media only screen 
        and (min-device-width: 320px) 
        and (max-device-width: 480px) {
          div.et_search_outer {
            width: 280px;
          }
      }

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:

@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;
    }
}

In my opinion these are the best possible solutions.

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