CSS Styling

You can use the following as starting:

.entry {
  clear: both;
}

.entry ul {
  margin: 1em 0 0;
  float: left;
  width: 14%;
}

.entry ul li {
  list-style: square;
  display: block;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  background: transparent;
}

ul.property_search-tabs li.epl-sb-current {
  color: #222;
  border-bottom: 0;
  margin-bottom: 0;
  background: transparent;
}

.epl-search-forms-wrapper {
  float: right;
  width: 86%;
}

.epl-search-slim .epl-search-row-half,
.epl-search-slim .epl-property_location,
.epl-search-slim .epl-property_category,
.epl-search-slim .epl-search-other {
  width: 14.8%;
}

.epl-search-slim .epl-search-submit-row {
  width: 11%;
  margin-right: 0;
  margin-top: 1.6em;
}

You should see it like this: https://imgur.com/a/OlwHb

For radio options, I believe you will need to add those manually and use jQuery to get the values when submitting the form.

Thanks very much Atul,

That is a great help.

Thanks again

Paul

Hi Atul,

I tested out on a test site and got it working fine, but now I have applied to the live site I have a couple of issues.

The first is on https://www.davidclarke.co.uk/property-for-sale/ the search box does not go the full width. The page uses a shortcode to display the search box.

The second property is when a search is run like https://www.davidclarke.co.uk/?action=epl_search&post_type=property&property_status=&property_location=&property_category=&property_price_from=&property_price_to=&property_bedrooms_min=&property_bedrooms_max= the styling is not applied. This version of the search box is displayed by echo in the archive-listing.php

Please could you tell me how to fix?

Thank you

Paul