Sometimes, it’s preferable to expose certain fields only in the mobile view. MetaLocator can show and hide certain fields by using conditional CSS.
Note: CSS editing is available for Pro and higher Plans
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 Results Card
Navigate the Results tab and select Edit List > Add Field > Directions > Add Field.
Step 2: Add CSS to conditionally show the directions field
Add the following CSS under Style & Color Settings. This code should be added to the end of the existing CSS.
/* Hide the directions field in wide layouts. */
.metalocator .ml_link.ml_directions
{display:none;}
@media screen and (max-width: 568px) {
/* Show the directions field in narrow layouts. */
.metalocator .ml_link.ml_directions
{ display:block !important; }
}This may require some adjustment based on the particulars of your interface.