1. Docs
  2. Developer Guide
  3. Making The Search Form Responsive

Making The Search Form Responsive

The property search form by default has a ‘table’ layout specified in the CSS, to keep the controls spaced nicely.

There is no responsive element to the search form as we have no way of telling how wide your site is, how many controls you have in your search form, nor where you want the breakpoint to be.

As a quick example of making the form responsive, you can add something like so to your theme’s CSS:

/* Stack search form on anything less than ipad landscape */
@media (max-width:1023px) {

   .property-search-form { display:block }
   .property-search-form .control { display:block }

}

The above will stack the form controls in a vertical manner if the user is viewing the site on anything less than 1024 pixels. The media breakpoint and form class names may differ on your site.

Was this article helpful to you? Yes No