Sometimes, it's preferable to expose certain fields only in the mobile view.  MetaLocator can show and hide certain fields by using conditional CSS.

For example, our mobile views typically collapse to the directory when in a small context as shown below:

 

Since your mobile customers will be viewing this directory, it may be preferable to display a convenient link to "Directions" (for example) in this view.

To do this, we first must add the directions to the Directory Item Template, then conditionally display it only when the display is below a certain width.

Step 1: Add the field to the directory item template.

Follow the steps in the MetaLocator Templates tutorial to add {directions} to the Directory Item Template.

Step 2: Add CSS to conditionally show the directions field

Add the following CSS to your "CSS" setting found under Style & Color Settings.  This code should be added to the end of the existing CSS.

 

/* Hide the directions field in wide layouts. */ 
#ml_results_wrapper div.com_locator_entry .line_item.directions{
display:none;
}

@media screen and (max-width: 568px) {

/* Show the directions field in narrow layouts. */
#ml_results_wrapper div.com_locator_entry .line_item.directions{
display:block !important;  
}

}


This may require some adjustment based on the particulars of your interface. Try replacing "directions" in the above code with other field "safe names" like "address" and "title"

Did this answer your question?