1. Home
  2. Docs
  3. Directory Design & Layout
  4. Spacing

Spacing


Business Directory

Add space after single Business listing

Add space after single business listing

If your theme is showing additional content under individual posts, you may want to create a bit of space at the end of the listing.  Add this bit of code to your CSS Customizer:

.single #page .entry { margin-bottom: 80px; }

listing spacing I
listing spacing II

Center logo on single Business listing

Move Business Logo to center of Single Business Listing post and resize.

Add this code to your CSS Customizer.

#business .logo {display: block; float: none; margin: 0 auto; text-align: center; width: 200px; height: 200px; }

biz directory logo layout I
biz directory logo layout II

Center or hide featured image on single Business listings

The individual listings in your Business Directory are custom post types. These posts use the formatting from your theme. If your theme is using / displaying a featured image for posts, you can center the featured image using the following code in your CSS Customizer:

#business .wp-post-image { display: block; float: none; margin: 0 auto; text-align: center; width: 200px; height: 200px; }

To hide the featured image, add this code to your CSS Customizer:

#business .wp-post-image { display: none; }


Remove extra spaces from address display

If there is an extra line in the display on SOME of your individual Business addresses – this may be caused by extra spaces on the edit screen.

with a return

Go to Businesses >> Edit Business and edit the Business listing by deleting any extra spaces after the address line to correct:

without a return

If there is unwanted space affecting ALL of your Businesses addresses, you will need to use CSS to address this. The specific CSS that you need may vary depending on your theme.

You might try the following to get started: p.address { margin: 20px 0px !important; }


Search Feature

Center search feature

When you add the Directory search shortcode to your page, the search feature will be left-aligned.

To center the search feature, add this bit of CSS to your Customizer:

#business-search.business_search_form {text-align: center;}

center search feature Business Directory plugin

Display search feature full-width

To display the search feature at the full-width of the page, add this bit of CSS to your customizer:

.business_search_form input, select { width: 100%; }


Hide search term

To hide the search term and only display the category search option, add the following bit of CSS to your Customizer:

#searchtext {display: none;}

#business-search-term {display: none;}

#business-search h3 {display: none;}

Membership form field width

Set field width to 100%

Depending on the theme you are using, the fields of your membership form may not all display at the same width. You can adjust this by adding this bit of CSS to your customizer:

#membership_form input[type="text"], #membership_form input[type="email"] {width:100%;}

Was this article helpful to you? Yes 1 No