# Targeting media queries

If your web app is responsive you may want to setup different tours for different screen sizes.

## 1. Track media query result

Pass appropriate media query results as user properties to HelpHero.

```html
<script>
  // update as appropriate to your CSS
  var mediaQuery = window.matchMedia && window.matchMedia('(max-width: 767px)')

  HelpHero.identify('<?php echo get_current_user_id(); ?>', {
    isMobile: mediaQuery != null && mediaQuery.matches
  }); 

  // Optional respond to browser resizes
  if (mediaQuery != null) {
    mediaQuery.addListener(function (ev) {
      HelpHero.update({ isMobile: ev.matches }); 
    });
  }
</script>
```

:::note
Note: accessing media queries from JavaScript is not supported on older browsers such as IE9. check the [full compatibility list here.](https://caniuse.com/#feat=matchmedia)
:::

## 2. Setup a funnel

Now that you are tracking this as a user property you can setup a tour to only show if the user is on a mobile screen size. In the HelpHero Editor edit your tour and add a new funnel step after the first URL Match.

![Edit Funnel set to appear if the isMobile user property is true](/docs/images/funnel-media-query-2x.webp)

:::note
Please note if you are showing a different UI for tablet, mobile desktop based on user agent then [targeting via device type](/docs/funnels/device-types/) will likely be a better option for your app.
:::